/* ============================================================
   Refined Heritage — Consolidated Design Token Sheet (v3)
   Platform: BSB multi-tenant Laravel SaaS
   Ship as: public/css/tokens.css  (loaded before all other CSS)
   Scope: :root + [data-theme="dark"]  (no component classes here)
   Sources: style.css tokens, design-bundle/assets/styles.css,
            design-bundle/assets/admin.css, refined.css,
            finance.css, components.css
   v3 (2026-09-28, redesign stage A): adds the type scale, the 4px
   spacing scale, the full heritage palette from the design canvas's
   STYLE.md (tints, borders, overlays, toast, test strip) with its
   dark values, and remaps the old material --status-* colours onto
   burgundy / gold / sage. Every token name that existed before still
   exists. Component classes live in /css/design-system.css; see
   docs/DESIGN-SYSTEM.md.

   Dark values are written as literals, never as var() of another
   token: a var() inside a custom property resolves on the element
   that declares it, so a [data-theme] set on <body> instead of
   <html> would otherwise inherit the light value.
   ============================================================ */


/* ============================================================
   LIGHT THEME
   ============================================================ */
:root {

  /* --- Brand palette --- */
  --burgundy:       #722F37;   /* primary action / burgundy — FILL (white on it = 9.65:1) */
  --burgundy-deep:  #5A2329;   /* hover dark, confirm-destructive fill */
  --burgundy-soft:  #8C4750;   /* muted / soft burgundy */
  /* Burgundy used as TEXT. Identical to --burgundy in light, where burgundy
     already clears 4.5:1 on every surface (worst 7.47:1 on --surface-3). In
     dark it lifts to a legible tint, because --burgundy must stay dark enough
     to carry white button/badge text. Use for `color:`, never for a fill. */
  --burgundy-text:  #722F37;
  --burgundy-tint:        #F2EAE9;   /* 9%  — active nav item, active tab */
  --burgundy-tint-strong: #EEE4E3;   /* 12% — Owes pill, active .cnt, icon tiles */
  --burgundy-wash:        #F4EDEB;   /* 8%  — error alert, phone menu button */
  --gold:           #A8814E;   /* secondary accent / star fill — FILL only (2.75:1 as text) */
  --gold-soft:      #C2A06B;   /* lighter gold / hover */
  --gold-ink:       #7A5A2E;   /* gold text on light surfaces */
  --gold-tint:      #F1E9DF;   /* pending, wrap-up, warning */
  --gold-border:    rgba(168,129,78,0.40);
  --sage:           #4A6151;   /* positive / attending / success — FILL (5.21:1 as text) */
  --sage-ink:       #2F4438;   /* sage text on light surfaces */
  --sage-bg:        #E2EAE2;   /* sage tinted backgrounds */
  --sage-border:    rgba(74,97,81,0.30);
  /* Gold/sage used as TEXT. Same pattern as --burgundy-text: the fill tokens
     above must stay saturated enough to read as an accent behind white badge
     text, so they cannot also be darkened to carry body text. These variants
     are chosen to clear 4.5:1 on every surface each is actually used on —
     including the color-mix(...12-16%) tinted badge backgrounds, which are
     themselves tinted with the fill token and so close the gap. Worst cases:
     gold 4.75:1, sage 4.82:1. Use for `color:`, never for a fill. */
  --gold-text:      #6C5332;
  --sage-text:      #425648;
  --error-border:   rgba(114,47,55,0.30);

  /* --- Semantic aliases (used in components) --- */
  --accent:         var(--burgundy);
  --accent-ink:     #FFFFFF;
  --on-fill:        #FFFFFF;   /* text on any burgundy / sage fill */
  --crest:          #722F37;
  --crest-ring:     inset 0 0 0 1px rgba(168,129,78,0.45);

  /* --- Role colours (used in .pill.r-* and stat tiles) --- */
  --role-admin:     #c62828;
  --role-committee: #1565c0;
  --role-cellar:    #7b1fa2;
  --role-member:    #2e7d32;
  /* Member badge in the users admin has always rendered blue (not the sage
     --role-member); keep that blue but as a dark-adapting token. */
  --role-member-blue: #3b7fc4;

  /* --- Surfaces (warm parchment light theme) --- */
  --bg:        #F4EEE6;   /* page background */
  --bg-grain:  #EFE7DB;   /* slightly darker tint */
  --surface:   #FFFDFB;   /* card / panel background */
  --surface-2: #F3ECE2;   /* secondary surface (wells, bands, soft buttons) */
  --surface-3: #EBE1D4;   /* tertiary surface (neutral pills, .cnt) */
  --input-bg:          #FFFDFB;
  --btn-secondary-bg:  #FFFDFB;
  --btn-soft-bg:       #F3ECE2;
  --seg-bg:            #F3ECE2;

  /* --- Ink (text) --- */
  --ink:   #241A1B;   /* primary text */
  --ink-2: #6E5F5B;   /* secondary / label text — the lightest caption allowed */
  /* Tertiary / placeholder / muted. Darkened from #998A85 (2.57:1 on
     --surface-3 — failed AA everywhere) to clear 4.5:1 on every surface;
     worst case is now 4.57:1 on --surface-3. */
  --ink-3: #70615C;

  /* --- Lines & borders --- */
  --line:        rgba(36,26,27,0.10);   /* primary border */
  --line-2:      rgba(36,26,27,0.06);   /* subtle divider, row dividers */
  --line-strong: rgba(36,26,27,0.18);   /* subtotal rule, separators */
  --line-input:  rgba(36,26,27,0.22);   /* field and secondary-button borders */
  --dashed:      rgba(114,47,55,0.35);  /* dropzone border */

  /* --- Controls --- */
  --focus-ring:  rgba(114,47,55,0.18);
  --error-ring:  rgba(114,47,55,0.12);
  --toggle-off:  #B8A99D;
  --toggle-knob: #FFFFFF;
  --badge-fill:  #6C5332;   /* setup-% badge on the gear */
  --badge-ink:   #FFFFFF;

  /* --- Overlays --- */
  --scrim:        rgba(20,10,11,0.45);
  --grabber:      rgba(36,26,27,0.18);
  --toast-bg:     #241A1B;
  --toast-ink:    #F3EAE4;
  --toast-action: #D0AA78;
  --toast-icon:   #98AF9F;
  --test-bg:      #EADBC0;   /* TEST MODE strip */
  --test-ink:     #4D3A20;
  --test-border:  rgba(108,83,50,0.25);

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(60,34,28,0.06), 0 1px 3px rgba(60,34,28,0.05);
  --shadow-md: 0 4px 12px rgba(60,34,28,0.08), 0 2px 4px rgba(60,34,28,0.05);
  --shadow-lg: 0 18px 44px rgba(50,24,22,0.16), 0 6px 14px rgba(50,24,22,0.08);
  --shadow-save:  0 -8px 24px rgba(60,34,28,0.10);
  --shadow-sheet: 0 -12px 40px rgba(50,24,22,0.18);

  /* --- Typography --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Type scale (desktop; the phone values are set in the media query
     below). Serif for page/section/panel titles and hero figures; every
     figure is tabular sans or tabular serif, never monospace. */
  --fs-page:    30px;   /* page title, serif 500 */
  --fs-section: 21px;   /* section title, serif 500 */
  --fs-panel:   18px;   /* panel title, serif 500 */
  --fs-body-console: 14.5px;
  --fs-body-portal:  15px;
  --fs-body:    var(--fs-body-console);
  --fs-meta:    13px;   /* captions, meta lines */
  --fs-min:     12px;   /* smallest body text */
  --fs-micro:   11px;   /* eyebrows, pills, table heads only */
  --fs-hero:    32px;   /* KPI / hero figure, serif 600 */
  --lh-body:    1.5;

  /* --- Spacing: one 4px scale --- */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-44: 44px;
  --gutter:      28px;     /* console side padding (16px on phone) */
  --content-max: 1240px;   /* console content column */
  --portal-max:  760px;    /* portal content column */

  /* --- Border radii --- */
  --r-xs: 8px;     /* tags, kbd */
  --r-sm: 12px;    /* inputs, icon buttons */
  --r-md: 16px;    /* phone cards, alerts, list containers */
  --r-lg: 22px;    /* panels, KPI tiles, portal cards */
  --r-xl: 28px;    /* bottom-sheet top corners */
  --r-btn: 11px;   /* desktop M buttons */
  --r-pill: 999px; /* pills, chips, segmented */

  /* --- Touch target --- */
  --tap: 48px;       /* preferred */
  --tap-min: 44px;   /* the floor, never smaller on a phone */

  /* --- Colour-coded status (components.css origin, kept for compat) ---
     Remapped 2026-09-28 off material blue/orange/red/green onto the
     heritage palette (design brief §4): info = surface-2 + gold,
     warning = gold tint, error = burgundy wash, success = sage-bg. */
  --status-success:    #425648;
  --status-success-bg: #E2EAE2;
  --status-warning:    #6C5332;
  --status-warning-bg: #F1E9DF;
  --status-error:      #722F37;
  --status-error-bg:   #F4EDEB;
  --status-info:       #6C5332;
  --status-info-bg:    #F3ECE2;

  /* --- Wine type colours (badge chips) --- */
  --wine-red:          #c62828;
  --wine-red-bg:       #ffebee;
  --wine-white:        #f9a825;
  --wine-white-bg:     #fffde7;
  --wine-sparkling:    #00838f;
  --wine-sparkling-bg: #e0f7fa;
  --wine-rose:         #d81b60;
  --wine-rose-bg:      #fce4ec;
  --wine-fortified:    #6d4c41;
  --wine-fortified-bg: #efebe9;
  --wine-dessert:      #ff8f00;
  --wine-dessert-bg:   #fff8e1;
}

/* Phone type scale and gutter (the 760px phone breakpoint every
   table-to-card and switcher rule uses). */
@media (max-width: 760px) {
  :root {
    --fs-page:    25px;
    --fs-section: 19px;
    --fs-panel:   17px;
    --fs-hero:    26px;
    --gutter:     16px;
  }
}

/* The member app reads at 15px, the console at 14.5px. */
body.rh { --fs-body: var(--fs-body-portal); }


/* ============================================================
   DARK THEME  (toggle via [data-theme="dark"] on <html>/<body>)
   ============================================================ */
[data-theme="dark"] {

  /* --- Brand palette (lifted / warmer in dark) --- */
  --burgundy:       #9B4F57;   /* FILL only — white on it = 5.75:1 (keeps AA) */
  --burgundy-deep:  #7E3A42;
  --burgundy-soft:  #B56A72;
  /* As TEXT, --burgundy is only 2.46:1 on --surface-3. This lighter tint is
     the text-safe counterpart (worst 5.62:1) and is what `color:` should use. */
  --burgundy-text:  #D98F98;
  --burgundy-tint:        #392424;
  --burgundy-tint-strong: #3E2627;
  --burgundy-wash:        #352222;
  --gold:           #C79A5E;   /* FILL — 5.54:1 as text on --surface-3, but only
                                  4.21:1 on its own tinted badge background */
  --gold-soft:      #D8B57F;
  --gold-ink:       #E4C58C;   /* gold ink on dark = lighter for contrast */
  --gold-tint:      #3E2F24;
  --gold-border:    rgba(199,154,94,0.40);
  --sage:           #6E8E78;   /* FILL only — 3.92:1 as text on --surface-3 */
  --sage-ink:       #CDE0D2;   /* sage ink on dark = lighter */
  --sage-bg:        #31302A;
  --sage-border:    rgba(152,175,159,0.30);
  /* Text-safe counterparts, lifted so they also clear 4.5:1 against the
     colour-mixed badge backgrounds (worst: gold 4.75:1, sage 4.81:1). */
  --gold-text:      #D0AA78;
  --sage-text:      #98AF9F;
  --error-border:   rgba(217,143,152,0.35);

  /* --- Semantic aliases --- */
  --accent:     #9B4F57;
  --accent-ink: #FFFFFF;
  --on-fill:    #FFFFFF;
  --crest:      #9B4F57;
  --crest-ring: inset 0 0 0 1px rgba(168,129,78,0.45);

  /* --- Surfaces (very dark warm tones) --- */
  --bg:        #17110F;
  --bg-grain:  #1C1513;
  --surface:   #241B19;
  --surface-2: #2C211F;
  --surface-3: #352825;
  --input-bg:          #2C211F;
  --btn-secondary-bg:  #2C211F;
  --btn-soft-bg:       #352825;
  --seg-bg:            #2C211F;

  /* --- Ink --- */
  --ink:   #F3EAE4;
  --ink-2: #BBA9A2;
  /* Lifted from #8B7872 (3.39:1 on --surface-3) to clear 4.5:1 everywhere;
     worst case is now 4.67:1 on --surface-3. */
  --ink-3: #A3908A;

  /* --- Lines --- */
  --line:        rgba(255,247,242,0.10);
  --line-2:      rgba(255,247,242,0.05);
  --line-strong: rgba(255,247,242,0.16);
  --line-input:  rgba(255,247,242,0.20);
  --dashed:      rgba(217,143,152,0.40);

  /* --- Controls --- */
  --focus-ring:  rgba(217,143,152,0.25);
  --error-ring:  rgba(217,143,152,0.18);
  --toggle-off:  #5A4B47;
  --toggle-knob: #F3EAE4;
  --badge-fill:  #D0AA78;
  --badge-ink:   #241A1B;

  /* --- Overlays --- */
  --scrim:        rgba(0,0,0,0.60);
  --grabber:      rgba(255,247,242,0.22);
  --toast-bg:     #413230;
  --toast-ink:    #F3EAE4;
  --toast-action: #D0AA78;
  --toast-icon:   #98AF9F;
  --test-bg:      #3B2F22;
  --test-ink:     #E4C58C;
  --test-border:  rgba(228,197,140,0.25);

  /* --- Shadows (deeper on dark) --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 22px 50px rgba(0,0,0,0.55);
  --shadow-save:  0 -8px 24px rgba(0,0,0,0.50);
  --shadow-sheet: 0 -12px 40px rgba(0,0,0,0.60);

  /* --- Role colours (remain vivid enough on dark) --- */
  --role-admin:     #e57373;
  --role-committee: #64b5f6;
  --role-cellar:    #ce93d8;
  --role-member:    #81c784;
  --role-member-blue: #6ba7e0;   /* lifted for dark-surface contrast */

  /* --- Status colours (heritage, dark) --- */
  --status-success:    #98AF9F;
  --status-success-bg: #31302A;
  --status-warning:    #D0AA78;
  --status-warning-bg: #3E2F24;
  --status-error:      #D98F98;
  --status-error-bg:   #352222;
  --status-info:       #D0AA78;
  --status-info-bg:    #2C211F;
}