/* ============================================================
   ICHIYAJO Showcase — Design Tokens
   Single source of truth for colors, type, spacing, motion
   spec §2.1, §2.3
   ============================================================ */

:root {
  /* ─── Color: surfaces ────────────────────────────────── */
  --ink:        #0A0E1A;   /* primary surface, dark canvas       */
  --ink-soft:   #131826;   /* card backgrounds, section breaks   */
  --ink-deep:   #060814;   /* gutters, deeper voids              */

  /* ─── Color: text on ink ─────────────────────────────── */
  --paper:      #F4F0E8;   /* primary text / surface for inverts */
  --paper-soft: rgba(244, 240, 232, 0.78);
  --paper-dim:  rgba(244, 240, 232, 0.55);
  --paper-mute: rgba(244, 240, 232, 0.35);

  /* ─── Color: accents ─────────────────────────────────── */
  --gold:       #C9A455;   /* hairlines, micro-labels, numerals  */
  --gold-light: #E5C572;   /* hover / highlight                  */
  --gold-deep:  #A88A3E;   /* pressed state                      */
  --ember:      #FF6B35;   /* primary CTA, GrowX badge only      */
  --ember-deep: #E55425;   /* CTA hover                          */
  --muted:      #8A8478;   /* secondary text on paper background */

  /* ─── Color: alpha tints (for layering) ──────────────── */
  --gold-a08:   rgba(201, 164, 85, 0.08);
  --gold-a15:   rgba(201, 164, 85, 0.15);
  --gold-a25:   rgba(201, 164, 85, 0.25);
  --gold-a40:   rgba(201, 164, 85, 0.40);
  --ember-a10:  rgba(255, 107, 53, 0.10);
  --ember-a20:  rgba(255, 107, 53, 0.20);

  /* ─── Color: semantic ────────────────────────────────── */
  --color-bg:     var(--ink);
  --color-text:   var(--paper);
  --color-line:   var(--gold-a25);
  --color-accent: var(--gold);
  --color-cta:    var(--ember);

  /* ─── Typography: families ───────────────────────────── */
  /* Pre-woff2: fall back to high-quality system serifs/sans  */
  --font-display-en:
    "Fraunces",
    "Iowan Old Style", "Apple Garamond",
    Georgia, "Times New Roman", serif;

  --font-display-jp:
    "Noto Serif JP",
    "Hiragino Mincho ProN", "Yu Mincho",
    "Times New Roman", serif;

  --font-body-en:
    "Inter",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;

  --font-body-jp:
    "Noto Sans JP",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    ui-monospace, "SF Mono", Menlo, Consolas, "Courier New",
    monospace;

  --font-brush:
    "Caveat",
    "Hiragino Mincho ProN", cursive;

  /* Composite stacks (mixed JP+EN, JP first for ja content) */
  --font-display: var(--font-display-jp), var(--font-display-en);
  --font-body:    var(--font-body-jp),    var(--font-body-en);

  /* ─── Typography: scale ──────────────────────────────── */
  /* Base 17px, modular ratio 1.25, with fluid clamps     */
  --text-xs:      0.75rem;     /* 12.75px — micro labels    */
  --text-sm:      0.875rem;    /* 14.875 — captions         */
  --text-base:    1rem;        /* 17px    — body            */
  --text-md:      1.0625rem;   /* 18px    — emphasised body */
  --text-lg:      1.25rem;     /* 21.25   — lead            */
  --text-xl:      1.5rem;      /* 25.5    — h4              */
  --text-2xl:     2rem;        /* 34      — h3              */
  --text-3xl:     2.5rem;      /* 42.5    — h2              */
  --text-4xl:     clamp(2.75rem, 5vw, 3.75rem);
  --text-5xl:     clamp(3.5rem, 7vw, 5rem);
  --text-6xl:     clamp(4.5rem, 9vw, 6.5rem);
  --text-display: clamp(4rem, 12vw, 9.5rem);   /* Hero "ICHIYAJO." */
  --text-monolith:clamp(6rem, 18vw, 14rem);    /* 404 numerals     */

  /* ─── Typography: weights & tracking ─────────────────── */
  --fw-thin:     200;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.3em;

  /* ─── Typography: line-heights (lang-aware in base.css) */
  --leading-tight:    1.05;
  --leading-snug:     1.25;
  --leading-normal:   1.55;
  --leading-relaxed:  1.75;
  --leading-loose:    1.9;

  /* ─── Spacing scale (8px base) ───────────────────────── */
  --space-3xs:   0.25rem;  /* 4   */
  --space-2xs:   0.5rem;   /* 8   */
  --space-xs:    0.75rem;  /* 12  */
  --space-sm:    1rem;     /* 16  */
  --space-md:    1.5rem;   /* 24  */
  --space-lg:    2.5rem;   /* 40  */
  --space-xl:    4rem;     /* 64  */
  --space-2xl:   6rem;     /* 96  */
  --space-3xl:   9rem;     /* 144 */
  --space-4xl:   13rem;    /* 208 */

  /* Fluid section spacing */
  --section-y:   clamp(4rem, 10vw, 9rem);
  --section-y-sm:clamp(3rem, 6vw, 5rem);

  /* ─── Containers ─────────────────────────────────────── */
  --container-narrow:  720px;   /* Notes body, single-column   */
  --container-default: 1080px;  /* default page                */
  --container-wide:    1280px;  /* Home, Works, density layout */
  --container-full:    1440px;  /* edge-to-edge with gutter    */
  --gutter-x:          clamp(1rem, 4vw, 2.5rem);

  /* ─── Radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ─── Shadow ─────────────────────────────────────────── */
  --shadow-soft:    0 10px 30px -15px rgba(0, 0, 0, 0.55);
  --shadow-medium:  0 20px 50px -25px rgba(0, 0, 0, 0.65);
  --shadow-strong:  0 30px 80px -40px rgba(0, 0, 0, 0.80);
  --shadow-gold:    0 20px 60px -30px rgba(201, 164, 85, 0.45);
  --shadow-ember:   0 16px 40px -16px rgba(255, 107, 53, 0.55);

  /* ─── Motion ─────────────────────────────────────────── */
  --easing-default: cubic-bezier(0.22, 1, 0.36, 1);        /* expo.out */
  --easing-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-linear:  linear;
  --easing-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-medium:  360ms;
  --dur-slow:    640ms;
  --dur-cinema:  1200ms;

  /* ─── z-index scale ──────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      400;
  --z-cursor:   800;
  --z-preload:  900;
  --z-top:      999;

  /* ─── Component sizing ───────────────────────────────── */
  --nav-h:        72px;
  --nav-h-mobile: 60px;
  --hairline:     1px;
  --hairline-strong: 2px;
}

/* ─── Reduced-motion: shorten durations ──────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast:    0.01ms;
    --dur-medium:  0.01ms;
    --dur-slow:    0.01ms;
    --dur-cinema:  0.01ms;
  }
}