/* ============================================================================
   BANARASI KARKHANA — Brand Design Tokens
   Single source of truth for colour, type scale, spacing, motion, radius.
   Values derived in OKLCH (see comments) per the Master Architecture Document;
   served as hex for broad mobile-webview support. Audit-corrected throughout.
   ----------------------------------------------------------------------------
   Load order: this file FIRST, then brand-typography.css, then Dawn base.
   ========================================================================== */

:root {
  /* ---- COLOUR · 60 neutrals : 30 olive : 10 brass ----------------------- */
  /* Neutrals — the museum wall. Never pure #fff. */
  --bk-bg-alabaster:    #F4EFE6;   /* oklch(0.945 0.012 84)  · primary ground */
  --bk-bg-cream:        #FAF6EE;   /* oklch(0.969 0.010 86)  · raised surfaces */
  --bk-bg-stone:        #E7DECE;   /* oklch(0.890 0.018 83)  · bands, filter rail */

  /* Olive — the heritage brand voice (the chromatic identity competitors lack) */
  --bk-olive:           #4A4A2E;   /* oklch(0.345 0.038 109) · primary buttons, header */
  --bk-olive-deep:      #33331F;   /* oklch(0.262 0.030 110) · dark sections, footer */
  --bk-olive-muted:     #6B6B4D;   /* oklch(0.470 0.034 106) · secondary, chips, pill */

  /* Brass — the one owned accent. Dust-toned, never shiny zari-yellow. */
  --bk-brass:           #A98C4B;   /* oklch(0.638 0.072 84)  · NON-TEXT only: rules, seal, focus */
  --bk-brass-deep:      #7A6230;   /* oklch(0.470 0.064 82)  · brass TEXT on light (AA-corrected) */
  --bk-brass-light:     #C8A86A;   /* lighter brass for TEXT on dark grounds (footer hover) — ~5.5:1 on olive-deep */

  /* Ink — warm near-black. Never #000. */
  --bk-ink:             #2A2A22;   /* oklch(0.255 0.008 100) · primary text */
  --bk-ink-soft:        #5C5A4E;   /* oklch(0.430 0.012 96)  · secondary text, captions */
  --bk-on-olive:        #F1EAD9;   /* oklch(0.928 0.016 86)  · cream text on dark — inline button colour */

  /* Functional — used rarely. Oxblood is alerts/sold ONLY, never a sale badge. */
  --bk-oxblood:         #6E2A21;   /* oklch(0.360 0.090 32) */
  --bk-hairline:        #D8CDB8;   /* oklch(0.840 0.020 86)  · 1px rules, borders (replaces shadow) */

  /* Semantic aliases (use these in components, not the raw tokens above) */
  --bk-page:            var(--bk-bg-alabaster);
  --bk-surface:         var(--bk-bg-cream);
  --bk-text:            var(--bk-ink);
  --bk-text-muted:      var(--bk-ink-soft);
  --bk-accent:          var(--bk-brass);
  --bk-accent-text:     var(--bk-brass-deep);
  --bk-border:          var(--bk-hairline);

  /* ---- TYPE FAMILIES ---------------------------------------------------- */
  --bk-font-display: "Fraunces", "Fraunces Variable", Georgia, "Times New Roman", serif;
  --bk-font-body:    "Hanken Grotesk", "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bk-font-deva:    "Mukta Vaani", "Noto Sans Devanagari", system-ui, sans-serif;

  /* ---- TYPE SCALE · 1.25 (mobile) widening to ~1.333 (desktop) via clamp - */
  --bk-fs-h1:        clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);    /* 44 → 88px */
  --bk-fs-h2:        clamp(2rem, 1.4rem + 3vw, 3.5rem);         /* 32 → 56px */
  --bk-fs-h3:        clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);   /* 24 → 34px */
  --bk-fs-standfirst:clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);  /* 20 → 26px */
  --bk-fs-body-lg:   1.125rem;   /* 18px — primary editorial body */
  --bk-fs-body:      1rem;       /* 16px */
  --bk-fs-caption:   0.9375rem;  /* 15px */
  --bk-fs-eyebrow:   0.75rem;    /* 12px tracked caps */
  --bk-fs-price:     1.0625rem;  /* 17px tabular */

  /* ---- TYPE RULES ------------------------------------------------------- */
  --bk-measure:           68ch;     /* body line length cap (62–72ch) */
  --bk-leading-body:      1.65;
  --bk-leading-display:   1.05;
  --bk-tracking-display:  -0.015em;
  --bk-tracking-eyebrow:  0.16em;
  --bk-tracking-button:   0.04em;

  /* ---- SPACING · 8px base, deliberately non-linear ---------------------- */
  --bk-space-1:  0.25rem;  /* 4  */
  --bk-space-2:  0.5rem;   /* 8  */
  --bk-space-3:  0.75rem;  /* 12 */
  --bk-space-4:  1rem;     /* 16 */
  --bk-space-6:  1.5rem;   /* 24 */
  --bk-space-8:  2rem;     /* 32 */
  --bk-space-12: 3rem;     /* 48 */
  --bk-space-16: 4rem;     /* 64 */
  --bk-space-24: 6rem;     /* 96  — section padding, mobile */
  --bk-space-32: 8rem;     /* 128 — section padding, desktop floor */
  --bk-space-48: 12rem;    /* 192 — section padding, desktop ceiling */

  /* Inter-section rhythm — chapters breathe as silence, not padded cards */
  --bk-section-pad: clamp(6rem, 3rem + 8vw, 12rem);   /* 96 → 192px */
  --bk-grid-gutter: clamp(1.25rem, 0.5rem + 2vw, 2rem); /* 20 → 32px */
  --bk-card-pad:    1.5rem; /* 24px */

  /* ---- MOTION · choreography, not a dance party ------------------------- */
  --bk-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* smooth ease-out, NO bounce */
  --bk-ease-reveal: cubic-bezier(0.16, 1, 0.30, 1);   /* H1 line-mask reveal */
  --bk-dur-fast:    320ms;   /* link/CTA underline wipe */
  --bk-dur-base:    500ms;   /* card crossfade */
  --bk-dur-slow:    700ms;   /* section fade-and-rise */
  --bk-dur-scroll:  900ms;   /* scroll-into-chapter */

  /* ---- RADIUS · near-sharp = couture confidence ------------------------- */
  --bk-radius-sharp: 0;
  --bk-radius-soft:  2px;     /* buttons, inputs, cards, certificate */
  --bk-radius-pill:  9999px;  /* status chips + concierge FAB ONLY */

  /* ---- ELEVATION · we use hairlines, not shadows ------------------------ */
  --bk-shadow-none: none;
  --bk-focus-ring:  0 0 0 3px var(--bk-brass);
}

/* Page baseline — applied lightly so it composes with Dawn rather than fighting it */
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

/* hidden must always win, even over component display rules (drawers, empty states) */
[hidden] { display: none !important; }

::selection {
  background: var(--bk-brass);
  color: var(--bk-on-olive);
}

/* Reduced-motion: the global gate. Component JS also checks this, but kill it in CSS too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bk-dur-fast: 0ms;
    --bk-dur-base: 0ms;
    --bk-dur-slow: 0ms;
    --bk-dur-scroll: 0ms;
  }
}