/* ═══════════════════════════════════════════════════════════════════════════
   01 - TOKENS  ·  "Ink, Gold & Teak"
   The single source of truth. Nothing below this file may invent a colour, a
   gap, a radius or an easing curve.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens {

  :root {

    /* ── Canvas ────────────────────────────────────────────────────────── */
    --ink-950: #070605;
    --ink-900: #0A0908;
    --ink-850: #0F0D0B;
    --ink-800: #12100E;
    --ink-700: #1A1714;
    --ink-600: #241F1A;
    --ink-500: #332B23;

    /* ── Accent - burnt terracotta ─────────────────────────────────────── */
    /* The action colour is #7C1E0A, and every step below is the same hue
       (10deg) lifted until it can be read on the ink ground. The deep colour
       fills; the lifted ones write and draw. Contrast against --ink-900 is
       noted so no step is ever used below the ratio it can carry. */
    --action: #7C1E0A;        /* solid fills - buttons, pills, badges       */
    --action-hover: #98280F;  /* the same fill, one step warmer, on hover   */
    --on-action: #F6F1E7;     /* type on top of a filled action    - 6.9:1  */

    --gold-600: var(--action);
    --gold-500: #C85833;      /* rules, borders, small accent type  - 4.6:1 */
    --gold-400: #DE6F45;      /* focus rings, pills, meta type      - 6.0:1 */
    --gold-300: #EFA07C;      /* links and eyebrows on ink          - 9.3:1 */
    --gold-veil: rgba(200, 88, 51, .10);
    --gold-glow: rgba(200, 88, 51, .30);

    /* ── Wood - tanpura teak / rosewood ────────────────────────────────── */
    --teak-700: #4A2511;
    --teak-600: #6B4423;
    --teak-500: #8B5A2B;
    --teak-400: #A9723C;

    /* ── Type ──────────────────────────────────────────────────────────── */
    --ivory-100: #F6F1E7;   /* headings                    - 13.7:1 on ink-900 */
    --ivory-200: #E4DCCB;
    --ivory-300: #CFC6B4;   /* body copy                   - 11.6:1 on ink-900 */
    --ivory-500: #8E8677;   /* captions and meta            - 5.5:1 on ink-900 */
    --ivory-700: #5B554B;   /* HAIRLINES AND ORNAMENT ONLY - 2.7:1, never text */

    /* ── Rare signal colour - errors and sold-out badges only ──────────── */
    --sindoor: #B03A2E;
    --sindoor-lift: #D4695C;   /* the same signal at text contrast on ink */

    /* ── Composites ────────────────────────────────────────────────────── */
    --hairline: rgba(246, 241, 231, .08);
    --hairline-hot: rgba(200, 88, 51, .34);
    --grad-gold: linear-gradient(135deg, #7C1E0A 0%, #C85833 28%, #EFA07C 52%, #DE6F45 74%, #4A2511 100%);
    --grad-fade-up: linear-gradient(180deg, rgba(10, 9, 8, 0) 0%, rgba(10, 9, 8, .92) 72%, #0A0908 100%);
    --grad-fade-down: linear-gradient(180deg, rgba(10, 9, 8, .88) 0%, rgba(10, 9, 8, 0) 60%);
    --shadow-card: 0 1px 0 rgba(246, 241, 231, .04) inset, 0 18px 48px -24px rgba(0, 0, 0, .9);
    --shadow-lift:
      0 1px 0 rgba(246, 241, 231, .07) inset,
      0 34px 70px -28px rgba(0, 0, 0, 1),
      0 0 0 1px var(--hairline-hot);
    --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, .96);

    /* Surfaces, named by role so sections can alternate without guessing. */
    --surface: var(--ink-900);
    --surface-alt: var(--ink-850);
    --surface-raised: var(--ink-800);
    --surface-sunken: var(--ink-950);

    /* ── Typefaces ─────────────────────────────────────────────────────── */
    /* One family for the whole site, Devanagari included: Google Sans covers
       both scripts, so the artist's name is set in one typeface in both.
       The four roles below are kept as separate tokens on purpose - they are
       what the stylesheets ask for, and keeping them means a role can be given
       its own face later without touching every rule that uses it. */
    --ff-ui: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
    --ff-display: var(--ff-ui);
    --ff-editorial: var(--ff-ui);
    --ff-deva: 'Google Sans', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
    --ff-deva-ui: var(--ff-deva);
    --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* ── Type scale - fluid, 1.25 at mobile → 1.333 at desktop ─────────── */
    --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);
    --fs-h1:      clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);
    --fs-h2:      clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
    --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
    --fs-h4:      clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
    --fs-lead:    clamp(1.0625rem, 1rem + .5vw, 1.375rem);
    --fs-body:    clamp(.9375rem, .9rem + .18vw, 1.0625rem);
    --fs-meta:    .8125rem;
    --fs-micro:   .75rem;
    --fs-eyebrow: .6875rem;

    /* Line heights, per role. */
    --lh-display: .94;
    --lh-h1: 1.02;
    --lh-h2: 1.08;
    --lh-h3: 1.18;
    --lh-lead: 1.55;
    --lh-body: 1.75;
    --lh-meta: 1.4;

    /* Tracking. */
    /* A sans at display size wants tighter tracking than the serif this scale
       was drawn for. */
    --ls-display: -.028em;
    --ls-h2: -.018em;
    --ls-eyebrow: .22em;
    --ls-pill: .1em;

    /* Measures (§4.2). */
    --measure-body: 68ch;
    --measure-head: 18ch;
    --measure-quote: 34ch;
    --measure-lead: 46ch;

    /* ── Space ladder - 4px base ───────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --sp-11: 160px;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container: 1280px;
    --container-wide: 1536px;
    --container-narrow: 760px;
    --gutter: clamp(20px, 5vw, 64px);
    --section-y: clamp(72px, 9vw, 152px);
    --header-h: 96px;
    --header-h-shrunk: 68px;
    /* Set from JS so overlays can compensate for the scrollbar without a jump. */
    --scrollbar-w: 0px;

    /* ── Radius ────────────────────────────────────────────────────────── */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ── Motion ────────────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.76, 0, .24, 1);
    --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
    --dur-fast: 180ms;
    --dur: 340ms;
    --dur-slow: 720ms;
    --dur-hero: 1200ms;
    --stagger: 70ms;

    /* ── Depth ─────────────────────────────────────────────────────────── */
    --z-base: 1;
    --z-sticky: 40;
    --z-header: 60;
    --z-player: 70;
    --z-menu: 80;
    --z-lightbox: 90;
    --z-preloader: 95;
    --z-cursor: 9998;
    --z-grain: 9999;

    /* ── Focus ─────────────────────────────────────────────────────────── */
    --focus-ring: 2px solid var(--gold-400);
    --focus-offset: 3px;

    /* ── Ornament sizes ────────────────────────────────────────────────── */
    --rule-w: 88px;
    --dot: 6px;
    --touch: 44px;      /* WCAG 2.2 AA minimum target */
  }

  /* Denser vertical rhythm on very small screens so a section still reads as
     a section rather than as a scroll. */
  @media (max-width: 479px) {
    :root {
      --section-y: clamp(56px, 14vw, 88px);
      --header-h: 72px;
      --header-h-shrunk: 60px;
    }
  }

  /* The site is dark by design; this only tells the UA to draw dark form
     controls and scrollbars. There is no light mode. */
  :root { color-scheme: dark; }

  /* Print (§15.10) inverts the ground entirely - tokens flip, rules don't. */
  @media print {
    :root {
      --surface: #fff;
      --surface-alt: #fff;
      --surface-raised: #fff;
      --surface-sunken: #fff;
      --ink-900: #fff;
      --ivory-100: #111;
      --ivory-200: #222;
      --ivory-300: #333;
      --ivory-500: #555;
      --action: #7C1E0A;
      --gold-500: #7C1E0A;
      --gold-400: #7C1E0A;
      --hairline: rgba(0, 0, 0, .18);
      --shadow-card: none;
      --shadow-lift: none;
      color-scheme: light;
    }
  }
}