@layer tokens, reset, base, layout, components, patterns, utilities, overrides;

@layer tokens {
  :root {
    /* Current site proportions translated into flexible ranges. */
    --ikuta-content: 60rem;
    --ikuta-wide: 75rem;
    --ikuta-reading: 42rem;
    --ikuta-gutter: clamp(1rem, 3vw, 2.5rem);
    --ikuta-section-space: clamp(2.5rem, 5vw, 5rem);
    --ikuta-grid-gap: clamp(1rem, 2.5vw, 2rem);

    --ikuta-space-1: 0.5rem;
    --ikuta-space-2: 1rem;
    --ikuta-space-3: 1.5rem;
    --ikuta-space-4: 2rem;
    --ikuta-space-6: 3rem;
    --ikuta-space-8: 4rem;

    --ikuta-color-purple-deep: #271545;
    --ikuta-color-purple: #6940ae;
    --ikuta-color-gold: #d8c293;
    --ikuta-color-ink: #303030;
    --ikuta-color-muted: #606060;
    --ikuta-color-border: #e5e5e5;
    --ikuta-color-paper: #f6efe5;
    --ikuta-color-white: #fff;
    --ikuta-color-focus: #ffb130;

    /* Yu Gothic Medium comes before Yu Gothic: the Regular weight is too thin on Windows. */
    --ikuta-font-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
    --ikuta-font-gothic: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
    --ikuta-font-body: 1rem;
    --ikuta-font-small: 0.875rem;
    --ikuta-font-h1: clamp(1.75rem, 4vw, 2.5rem);
    --ikuta-font-h2: clamp(1.4rem, 3vw, 2rem);
    --ikuta-font-h3: clamp(1.15rem, 2vw, 1.4rem);
    --ikuta-line-body: 1.8;
    --ikuta-line-heading: 1.45;

    /* Buttons. */
    --c-button-gradient: linear-gradient(#6940ae, #271545);
    --c-button-height: 3rem;
    --c-button-padding: 0.65rem 1.5rem;
    --c-button-border: #f6efe5;
    --c-button-shadow: 0 1px 2px rgb(0 0 0 / 0.25);

    /* Form fields. */
    --c-field-border: #d7d2c8;
    --c-field-border-hover: #b9b2a5;
    --c-field-border-active: var(--ikuta-color-purple);
    --c-field-ring: color-mix(in srgb, var(--ikuta-color-purple) 22%, transparent);
    --c-field-selected: color-mix(in srgb, var(--ikuta-color-purple) 6%, #fff);
    --c-field-radius: 0.25rem;
    --c-field-height: 3rem;
    --c-field-space: 0.75rem;

    --ikuta-border-width: 1px;
    --ikuta-motion-duration: 180ms;
    --ikuta-motion-easing: ease-out;
  }
}