/* ============================================================================
   Nevamiss — Design Tokens
   Version 2.0 · 2026-10-09 · Direction A "Answered in your name" (owner's pick,
   with "Heard. Read back. Booked." and the time-of-day greeting as copy habits)
   The source of truth. tokens.json is GENERATED from this file; never edit it:
     python3 scripts/brandcheck.py export .

   ARCHITECTURE — core (--b-core-*) → semantic (--b-color-*) → component.
   Component tokens are declared inside every theme block, identically, so a
   theme-locked panel recomputes them from its own semantic values.

   WHAT COLOUR MEANS
     Kola is the brand: plates, the mark, primary actions, the read-back chip.
     Coral is warmth and emphasis in shapes and fills: never body text on light
     grounds (2.7:1), never an error colour.
     Blush and paper are the hospitable grounds. Cocoa is the ink.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. CORE */
:root {
  --b-core-white:      #ffffff;
  --b-core-paper:      #fff9f5;   /* page */
  --b-core-blush-100:  #f7e4dc;   /* warm section ground; text on kola */
  --b-core-blush-200:  #ebd9d1;   /* decorative rules */
  --b-core-coral-400:  #ff6a4d;   /* the one warm accent */
  --b-core-kola-700:   #6b1424;   /* the brand */
  --b-core-kola-800:   #561020;   /* hover on kola */
  --b-core-cocoa-300:  #cdb6ae;   /* dark-theme meta */
  --b-core-cocoa-400:  #a8918a;   /* dark-theme control borders */
  --b-core-cocoa-500:  #8c746d;   /* light-theme control borders */
  --b-core-cocoa-600:  #6e5650;   /* light-theme meta */
  --b-core-cocoa-700:  #3b231e;   /* dark-theme warm section */
  --b-core-cocoa-800:  #2a1915;   /* dark-theme surface */
  --b-core-cocoa-900:  #24130f;   /* ink */
  --b-core-cocoa-950:  #1a0e0b;   /* dark-theme page */
  --b-core-linen:      #fbefea;   /* dark-theme text: recessed, not pure white */
}

/* ----------------------------------------------------- 2. SEMANTIC — LIGHT */
:root, [data-theme="light"] {
  color-scheme: light;
  --b-color-bg-page:        var(--b-core-paper);
  --b-color-bg-surface:     var(--b-core-white);
  --b-color-bg-warm:        var(--b-core-blush-100);
  --b-color-bg-brand:       var(--b-core-kola-700);
  --b-color-bg-ink:         var(--b-core-cocoa-900);   /* dark assurance bands */
  --b-color-text-on-ink:    var(--b-core-linen);
  --b-color-text-on-ink-meta: var(--b-core-cocoa-300);
  --b-color-text-primary:   var(--b-core-cocoa-900);
  --b-color-text-meta:      var(--b-core-cocoa-600);
  --b-color-text-brand:     var(--b-core-kola-700);
  --b-color-text-on-brand:  var(--b-core-white);
  --b-color-text-on-brand-meta: var(--b-core-blush-100);
  --b-color-text-on-accent: var(--b-core-cocoa-900);
  --b-color-accent:         var(--b-core-coral-400);
  --b-color-border-control: var(--b-core-cocoa-500);
  --b-color-border-rule:    var(--b-core-blush-200);
  --b-color-action:         var(--b-core-kola-700);
  --b-color-action-hover:   var(--b-core-kola-800);
  --b-color-text-on-action: var(--b-core-white);
  --b-color-focus-ring:     var(--b-core-kola-700);
  --b-color-focus-gap:      var(--b-core-white);
  /* 3. components */
  --b-button-primary-bg:   var(--b-color-action);
  --b-button-primary-text: var(--b-color-text-on-action);
  --b-button-secondary-border: var(--b-color-border-control);
  --b-button-secondary-text:   var(--b-color-text-primary);
  --b-input-bg:     var(--b-color-bg-surface);
  --b-input-border: var(--b-color-border-control);
  --b-input-text:   var(--b-color-text-primary);
  --b-caption-bg:   var(--b-color-bg-surface);
  --b-caption-text: var(--b-color-text-primary);
  --b-caption-meta: var(--b-color-text-meta);
  --b-caption-brand: var(--b-color-text-brand);
  --b-chip-bg:      var(--b-color-action);
  --b-chip-text:    var(--b-color-text-on-action);
}

/* ------------------------------------------------------ 2. SEMANTIC — DARK */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --b-color-bg-page:        var(--b-core-cocoa-950);
    --b-color-bg-surface:     var(--b-core-cocoa-800);
    --b-color-bg-warm:        var(--b-core-cocoa-700);
    --b-color-bg-brand:       var(--b-core-kola-700);
    --b-color-bg-ink:         var(--b-core-cocoa-900);
    --b-color-text-on-ink:    var(--b-core-linen);
    --b-color-text-on-ink-meta: var(--b-core-cocoa-300);
    --b-color-text-primary:   var(--b-core-linen);
    --b-color-text-meta:      var(--b-core-cocoa-300);
    --b-color-text-brand:     var(--b-core-blush-100);
    --b-color-text-on-brand:  var(--b-core-white);
    --b-color-text-on-brand-meta: var(--b-core-blush-100);
    --b-color-text-on-accent: var(--b-core-cocoa-900);
    --b-color-accent:         var(--b-core-coral-400);
    --b-color-border-control: var(--b-core-cocoa-400);
    --b-color-border-rule:    var(--b-core-cocoa-700);
    --b-color-action:         var(--b-core-blush-100);
    --b-color-action-hover:   var(--b-core-cocoa-300);
    --b-color-text-on-action: var(--b-core-cocoa-900);
    --b-color-focus-ring:     var(--b-core-blush-100);
    --b-color-focus-gap:      var(--b-core-cocoa-950);
    /* 3. components */
    --b-button-primary-bg:   var(--b-color-action);
    --b-button-primary-text: var(--b-color-text-on-action);
    --b-button-secondary-border: var(--b-color-border-control);
    --b-button-secondary-text:   var(--b-color-text-primary);
    --b-input-bg:     var(--b-color-bg-surface);
    --b-input-border: var(--b-color-border-control);
    --b-input-text:   var(--b-color-text-primary);
    --b-caption-bg:   var(--b-color-bg-surface);
    --b-caption-text: var(--b-color-text-primary);
    --b-caption-meta: var(--b-color-text-meta);
    --b-caption-brand: var(--b-color-text-brand);
    --b-chip-bg:      var(--b-color-action);
    --b-chip-text:    var(--b-color-text-on-action);
  }
}
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --b-color-bg-page:        var(--b-core-cocoa-950);
  --b-color-bg-surface:     var(--b-core-cocoa-800);
  --b-color-bg-warm:        var(--b-core-cocoa-700);
  --b-color-bg-brand:       var(--b-core-kola-700);
  --b-color-bg-ink:         var(--b-core-cocoa-900);   /* dark assurance bands */
  --b-color-text-on-ink:    var(--b-core-linen);
  --b-color-text-on-ink-meta: var(--b-core-cocoa-300);
  --b-color-text-primary:   var(--b-core-linen);
  --b-color-text-meta:      var(--b-core-cocoa-300);
  --b-color-text-brand:     var(--b-core-blush-100);
  --b-color-text-on-brand:  var(--b-core-white);
  --b-color-text-on-brand-meta: var(--b-core-blush-100);
  --b-color-text-on-accent: var(--b-core-cocoa-900);
  --b-color-accent:         var(--b-core-coral-400);
  --b-color-border-control: var(--b-core-cocoa-400);
  --b-color-border-rule:    var(--b-core-cocoa-700);
  --b-color-action:         var(--b-core-blush-100);
  --b-color-action-hover:   var(--b-core-cocoa-300);
  --b-color-text-on-action: var(--b-core-cocoa-900);
  --b-color-focus-ring:     var(--b-core-blush-100);
  --b-color-focus-gap:      var(--b-core-cocoa-950);
  /* 3. components */
  --b-button-primary-bg:   var(--b-color-action);
  --b-button-primary-text: var(--b-color-text-on-action);
  --b-button-secondary-border: var(--b-color-border-control);
  --b-button-secondary-text:   var(--b-color-text-primary);
  --b-input-bg:     var(--b-color-bg-surface);
  --b-input-border: var(--b-color-border-control);
  --b-input-text:   var(--b-color-text-primary);
  --b-caption-bg:   var(--b-color-bg-surface);
  --b-caption-text: var(--b-color-text-primary);
  --b-caption-meta: var(--b-color-text-meta);
  --b-caption-brand: var(--b-color-text-brand);
  --b-chip-bg:      var(--b-color-action);
  --b-chip-text:    var(--b-color-text-on-action);
}

/* --------------------------------------------------------- 4. TYPOGRAPHY
   Display: Bricolage Grotesque (OFL, opsz 12–96, wght 200–800, wdth 75–100).
   Headlines only: it lacks ṣ (U+1E63) and ✓, so names and running text go in Inter.
   Reading: Inter (OFL, opsz 14–32, wght 100–900).
   WEIGHT RULE: 700 is the display voice; 600 is apparatus (labels, buttons,
   chips); 400 reads. Each role is a quad, applied together. */
:root {
  --b-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --b-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --b-text-display-size: 2.75rem;
  --b-text-display-line: 0.95;
  --b-text-display-weight: 700;
  --b-text-display-tracking: -0.035em;

  --b-text-heading-size: 1.75rem;
  --b-text-heading-line: 1.05;
  --b-text-heading-weight: 700;
  --b-text-heading-tracking: -0.025em;

  --b-text-quote-size: 1.25rem;     /* Neva's words in a caption */
  --b-text-quote-line: 1.3;
  --b-text-quote-weight: 600;
  --b-text-quote-tracking: -0.01em;

  --b-text-body-size: 1rem;
  --b-text-body-line: 1.55;
  --b-text-body-weight: 400;
  --b-text-body-tracking: 0em;

  --b-text-label-size: 0.8125rem;
  --b-text-label-line: 1.3;
  --b-text-label-weight: 600;
  --b-text-label-tracking: 0.04em;

  --b-font-numeric-tabular: tabular-nums lining-nums;
  --b-measure: 64ch;
}
@media (min-width: 768px) {
  :root {
    --b-text-display-size: 5.5rem;
    --b-text-heading-size: 2.75rem;
    --b-text-quote-size: 1.5rem;
    --b-text-body-size: 1.0625rem;
  }
}

/* ------------------------------------------------- 5. SPACE, RADIUS, MOTION */
:root {
  --b-space-1: .25rem; --b-space-2: .5rem;  --b-space-3: .75rem;
  --b-space-4: 1rem;   --b-space-6: 1.5rem; --b-space-8: 2rem;
  --b-space-12: 3rem;  --b-space-16: 4rem;  --b-space-24: 6rem;

  /* Soft and hospitable: rounded photo frames and captions, pill chips. */
  --b-radius-sm: 10px;      /* inputs, buttons */
  --b-radius-md: 22px;      /* captions, cards */
  --b-radius-lg: 32px;      /* photo frames */
  --b-radius-pill: 999px;   /* chips */
  --b-border-width: 1px;
  --b-focus-width: 3px;
  --b-shadow-lift: 0 30px 60px -28px rgba(36, 19, 15, .5);

  --b-duration-fast: 140ms; --b-duration-base: 220ms;
  --b-ease-standard: cubic-bezier(.2, 0, .2, 1);
  /* The one signature moment: a caption settles onto its photo. */
  --b-ease-settle: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --b-duration-fast: 0ms; --b-duration-base: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------- 6. CLAIM FACTS */
:root {
  --b-fact-customers: 0;          /* pre-launch, 2026-10-09 */
  --b-fact-company-rc: 9907832;   /* CAC certificate, incorporated 2026-10-03 */
}