/* Cellar Dash — the reset and the theme tokens, and nothing else.
 *
 * Lifted out of style.css so the marketing homepage and the app can share one
 * source of truth for the palette. The app is thousands of lines of stylesheet
 * the homepage has no use for, and a second copy of the token block is a
 * palette that drifts — a fortnight later the marketing page is a slightly
 * different parchment than the product it advertises.
 *
 * Both pages link this FIRST, then their own stylesheet. Anything hardcoding a
 * hex outside this file is a bug — add a token or use one.
 */
/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --burgundy:    #6b2737;
  --burgundy-dk: #4a1a26;
  --gold:        #c9a84c;
  --gold-lt:     #f0d080;
  --cream:       #f4eee1;
  --card-bg:     #fbf7ee;
  --text:        #241d15;
  --text-muted:  #4d4335;
  --border:      #d6c9b2;
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --radius:      12px;

  --drink-now:   #2d7a45;
  --at-peak:     #1a6b8a;
  --hold:        #b85c00;
  --dnhold:      #7a6b00;
  --tbd:         #666;
}

/* ══ "Estate Light" theme tokens (design_handoff) ═════════════════════════
   Two layers:
     --el-*  the raw Estate Light design tokens, straight from the handoff
             README. This is the ONLY layer high-contrast mode overrides.
     --cd-*  the semantic names the rest of this file already speaks, now
             pointed at --el-*. Keeping the old names means the whole app
             rethemes from one place, and a future theme is another remap.
   Anything hardcoding a hex below this block is a bug — use a token. */
:root {
  /* ── Estate Light base ── */
  /* The four surfaces are a ladder, and the rungs have to be far enough apart
     to be seen. As first specified, --panel (#f4eee1) and --panel2 (#efe7d7)
     were ~2 L* apart, which is below the point at which a striped table row
     reads as a row at all — the tables looked like flat blocks of parchment.
     --panel2 and --page are now a step deeper so rows separate from the ground
     they sit on; --muted goes down with them to hold its measured ratio. */
  --el-page:    #e5dbc7;   /* app background (warm parchment) */
  --el-page-hi1:#f1e9d6;   /* top-left radial highlight */
  --el-page-hi2:#ece2cd;   /* top-right radial highlight */
  --el-card:    #fbf7ee;   /* primary card / panel surface */
  --el-panel:   #f4eee1;   /* recessed panel, headers, tab bars, list rows */
  --el-panel2:  #e6dbc4;   /* alt panel (stat cards, table rows) */
  --el-line:    #d9cdb4;   /* hairline divider */
  --el-line2:   #cbbc9f;   /* stronger border */
  --el-ink:     #241d15;   /* primary text / headings */
  --el-body:    #4d4335;   /* body copy */
  --el-muted:   #695d4a;   /* secondary / labels */
  --el-faint:   #7d7059;   /* tertiary / mono eyebrow labels */
  /* Sienna, a half-step deeper than the handoff's #a85a2c. Deepening the
     surfaces above cost the accent 0.4 of its contrast ratio; this hands it
     back (4.23 on --panel2, against 4.10 before either change) without the
     shift being visible as a different colour. */
  --el-accent:  #9c5126;   /* primary action (burnt sienna) */
  --el-accent2: #8f3a44;   /* accent hover / secondary emphasis */
  --el-accent-deep: #c97a35;/* lighter end of the accent CTA gradient */
  --el-on-accent:   #1a0f06;/* ink on the accent CTA gradient (per spec) */
  --el-gold:    #9c7b38;   /* monetary values */
  --el-wine:    #8f3a44;   /* wine category / primary chips */
  --el-ok:      #3f7a4a;   /* "Drink Now" */
  --el-hold:    #a8632c;   /* "Hold / Age" */
  --el-peak:    #3f7f8c;   /* "At Peak" */
  --el-dnhold:  #a8862c;   /* "Drink / Hold" (darkened for parchment) */
  --el-tbd:     #7a7268;
  /* AA-clearing steps of three tokens above, for surfaces that have to pass
     WCAG AA outright — the marketing homepage paints its body copy with these.
     Measured on the worst ground (--el-page): --el-muted lands at 4.44,
     --el-accent at 3.81 and --el-gold at 2.99, each a hair under its threshold.
     These are the smallest darkening of each that clears it (4.79 / 5.01 /
     3.54). REDESIGN_PLAN.md records the shortfalls; the app still uses the
     spec'd values, so this is an addition, not a retheme. */
  --el-muted-aa:  #6a5e4b;
  --el-accent-aa: #8f4a22;
  --el-gold-aa:   #8f6f31;
  /* --el-hold as body text on a light card is 4.38; this is the same warning
     colour deep enough to clear (7.3 on card, 5.9 on page). */
  --el-hold-aa:   #8a3a1a;
  /* Cabernet, for buttons that are not the primary action. A transparent
     button on parchment IS the parchment with a hairline round it — it reads
     as a disabled field rather than something to press — so the secondary is
     filled. Deep enough to hold white text (7.3:1) and to sit against the page
     (5.6:1), and far enough from the sienna primary that the hierarchy
     survives having two filled buttons side by side. */
  --el-wine-deep: #7b2f39;   /* hover / pressed */
  --el-on-wine:   #ffffff;
  /* ── Interactive surfaces ─────────────────────────────────────────────
     Nothing the user can press, toggle or enable may be painted in a
     surface colour. On parchment a transparent control with a hairline
     round it IS the parchment — it reads as a disabled field rather than
     something to press — so every control takes one of three fills, all of
     them sienna or cabernet and none of them the page:

       --cd-act-*   primary action        filled burnt sienna, white ink
       --cd-act2-*  secondary action      filled cabernet, white ink
       --cd-actq-*  quiet controls        a sienna wash with a sienna edge
                    (icon buttons, chips, tabs, toggles, segment options)
                    and sienna ink; their selected / "on" state promotes to
                    --cd-act-* so on and off are never the same colour.

     Measured on the worst ground of the four surfaces (--el-page and
     --el-panel2): the quiet ink clears AA on both the wash (5.8:1) and its
     hover (5.0:1), and the quiet edge sits at 4.8:1 against the surface,
     well past the 3:1 WCAG asks of a control's boundary. The sienna fill is
     5.8:1 under white and the cabernet 7.3:1; their hovers are 8.0 and 9.1.
     The quiet edge is a solid hex rather than an alpha because a translucent
     one lands at 2.1:1 — a boundary you cannot see is not a boundary. */
  --cd-act-bg:    var(--el-accent);
  --cd-act-bg-h:  #7f3f1c;
  --cd-act-ink:   #ffffff;
  --cd-act2-bg:   var(--el-wine);
  --cd-act2-bg-h: var(--el-wine-deep);
  --cd-act2-ink:  var(--el-on-wine);
  --cd-actq-bg:   rgba(156,81,38,0.18);
  --cd-actq-bg-h: rgba(156,81,38,0.30);
  --cd-actq-bd:   #8f4a22;
  --cd-actq-ink:  #6f3010;
  /* The same three tiers over a dark well (globe overlays, photo cards),
     where the wash has to lighten rather than darken to be seen. */
  --cd-actq-bg-dk:   rgba(201,122,53,0.26);
  --cd-actq-bg-dk-h: rgba(201,122,53,0.44);
  --cd-actq-bd-dk:   var(--el-accent-deep);
  --cd-actq-ink-dk:  #f2c79a;
  /* And the pair for text on the dark wells, where the light-surface status
     colours are far too dark to read: 9.0 and 8.6 against --cd-well-1. */
  --cd-on-dark-ok:  #8fbf9a;
  --cd-on-dark-bad: #e3a07a;
  /* Dark viewports (globe wells, drink-photo cards) stay dark in every mode —
     they hold photography and a lit 3D globe, so they are not themed. */
  --cd-well-1:  #16110b;
  --cd-well-2:  #0c0907;
  --cd-on-dark:   #f6efe2;  /* card titles over dark drink photos */
  --cd-on-dark-2: #e8ddca;  /* card subtext over dark drink photos */
  /* The assistant's glass orb is another of those: a lit dark well holding a
     body of liquid. Three stops of one radial gradient, from the lit top-left
     edge inward. The liquid colours are per-glass and live with the glass
     profiles in app.js, because they are drink colours, not theme colours. */
  --cd-orb-1: #322925;
  --cd-orb-2: #191412;
  --cd-orb-3: #120e0c;

  /* ── Semantic layer (what the rest of the stylesheet uses) ── */
  /* surfaces */
  --cd-page:        var(--el-page);
  --cd-page-hi1:    var(--el-page-hi1);
  --cd-page-hi2:    var(--el-page-hi2);
  --cd-panel:       var(--el-card);    /* the big app card */
  --cd-panel-border:var(--el-line);
  --cd-card:        var(--el-panel);   /* section inside the app card */
  --cd-card-2:      var(--el-panel2);
  --cd-card-border: var(--el-line2);
  --cd-surface:     var(--el-panel2);  /* card face */
  --cd-surface-2:   var(--el-panel);   /* nested / inputs */
  --cd-surface-3:   var(--el-panel2);  /* subtle fills, table headers */
  --cd-surface-bd:  var(--el-line2);
  --cd-on-surface:  var(--el-ink);
  --cd-on-surface-2:var(--el-body);
  --cd-on-surface-3:var(--el-muted);
  /* Every --cd-gold-ink call site is an accent role (dates, ratings, pairing
     headings, links), not a monetary one — money is --cd-value. */
  --cd-gold-ink:    var(--el-accent);
  /* text */
  --cd-text:        var(--el-ink);
  --cd-text-2:      var(--el-ink);
  --cd-muted:       var(--el-muted);
  --cd-muted-2:     var(--el-muted);
  --cd-muted-3:     var(--el-faint);
  /* accent / value — --cd-gold is the app's ACTION colour, --cd-value is money */
  --cd-gold:        var(--el-accent);
  --cd-gold-deep:   var(--el-accent-deep);
  --cd-on-gold:     var(--el-on-accent);  /* ink on an accent GRADIENT CTA (per spec) */
  /* Ink on a FLAT accent fill. The spec's dark ink only clears 3.8:1 against
     solid #a85a2c; white clears 5:1, so flat buttons take white. */
  --cd-on-gold-flat: #ffffff;
  --cd-value:       var(--el-gold);
  /* Tint of the accent, for chip fills / focus glows / hover washes. */
  /* The per-cellar rules below remap --cd-accent, but only on a page carrying
     [data-cellar]. Everything else — the landing page, the dialog, global
     chrome — needs a default, or var(--cd-accent) resolves to nothing and any
     rule painting with it silently renders transparent. */
  --cd-accent:       var(--el-accent);
  --cd-accent-br:    var(--el-accent-deep);
  --cd-accent-wash:  rgba(168,90,44,0.14);
  --cd-accent-wash2: rgba(168,90,44,0.24);
  /* status */
  --cd-drink-now:   var(--el-ok);
  --cd-at-peak:     var(--el-peak);
  --cd-drink-hold:  var(--el-dnhold);
  --cd-hold:        var(--el-hold);
  --cd-tbd:         var(--el-tbd);
  /* Per-cellar brand colours. "-br" (bright) is the handoff's brand hex, for
     dots, globe pins and anything sitting on a dark photo. The plain name is
     darkened so it stays legible as text/borders on parchment. */
  --cd-wine-br:     #b34a5c;  --cd-wine:    var(--el-wine);
  --cd-bourbon-br:  #cf9142;  --cd-bourbon: #8a5a1e;
  --cd-tequila-br:  #8ba04f;  --cd-tequila: #56682c;
  --cd-rum-br:      #b5763f;  --cd-rum:     #7d4c1f;
  --cd-gin-br:      #5f9f85;  --cd-gin:     #2f6b54;
  --cd-vodka-br:    #9fb0bf;  --cd-vodka:   #556a7c;
  --cd-beer-br:     #d0a63f;  --cd-beer:    #856618;
  --cd-sake-br:     #7f9fb5;  --cd-sake:    #46637a;
  /* type */
  --cd-serif: 'Cormorant Garamond', Georgia, serif;
  --cd-sans:  'Instrument Sans', system-ui, sans-serif;
  --cd-head:  'Bricolage Grotesque', system-ui, sans-serif;
  --cd-mono:  'JetBrains Mono', ui-monospace, monospace;
  /* shape / elevation — shadows softened for light surfaces */
  --cd-r-panel: 20px;
  --cd-r-card:  16px;
  --cd-r-pill:  100px;
  --cd-shadow-panel: 0 40px 90px -40px rgba(0,0,0,0.5);
  --cd-shadow-card:  0 24px 40px -28px rgba(0,0,0,0.35);
}

/* ── High-contrast mode ───────────────────────────────────────────────────
   Set data-contrast="on" on <html> (the Display panel does this). Only the
   --el-* base is restated; every --cd-* alias inherits the change. */
:root[data-contrast="on"] {
  --el-page:    #f2eadc;
  --el-page-hi1:#f2eadc;
  --el-page-hi2:#f2eadc;
  --el-card:    #ffffff;
  --el-panel:   #f6f1e6;
  --el-panel2:  #e7dfcb;
  --el-line:    #8a7c64;
  --el-line2:   #6f6047;
  --el-ink:     #000000;
  --el-body:    #241d13;
  --el-muted:   #413524;
  --el-faint:   #5a4c37;
  --el-accent:  #8a3d15;
  --el-accent2: #7a2632;
  --el-accent-deep: #8a3d15;   /* flat, so the CTA keeps one solid contrast */
  --el-on-accent:   #ffffff;   /* white ink — #1a0f06 fails on the darker accent */
  --el-gold:    #6f5316;
  --el-wine:    #7a2632;
  --el-wine-deep: #631f29;
  --el-ok:      #245c30;
  --el-hold:    #8a4a15;
  --el-peak:    #22626f;
  --el-dnhold:  #6f5316;
  --el-tbd:     #413524;
  --cd-accent-wash:  rgba(138,61,21,0.18);
  --cd-accent-wash2: rgba(138,61,21,0.30);
  --cd-act-bg-h:  #6f3010;
  --cd-actq-bg:   rgba(138,61,21,0.22);
  --cd-actq-bg-h: rgba(138,61,21,0.36);
  --cd-actq-bd:   #8a3d15;
  /* A step deeper than the default theme's, so the quiet ink still clears AA
     on the darkest wash this mode makes (4.92 on --el-panel2 hovered). */
  --cd-actq-ink:  #63290c;
  --cd-actq-bg-dk:   rgba(224,149,79,0.34);
  --cd-actq-bg-dk-h: rgba(224,149,79,0.52);
  --cd-actq-bd-dk:   #e0954f;
  --cd-actq-ink-dk:  #ffdcbd;
  --cd-bourbon: #6f4514;  --cd-tequila: #3f4d1f;  --cd-rum:   #5f3915;
  --cd-gin:     #1f5240;  --cd-vodka:   #3d5266;  --cd-beer:  #6a5011;
  --cd-sake:    #2f4a5e;
}

/* Per-cellar accent as a single var the redesign sets on a container.
   --cd-accent = legible-on-parchment; --cd-accent-br = the brand hex, for
   dots/pins/anything over a dark photo. */
[data-cellar="wine"]    { --cd-accent: var(--cd-wine);    --cd-accent-br: var(--cd-wine-br); }
[data-cellar="bourbon"] { --cd-accent: var(--cd-bourbon); --cd-accent-br: var(--cd-bourbon-br); }
[data-cellar="tequila"] { --cd-accent: var(--cd-tequila); --cd-accent-br: var(--cd-tequila-br); }
[data-cellar="rum"]     { --cd-accent: var(--cd-rum);     --cd-accent-br: var(--cd-rum-br); }
[data-cellar="gin"]     { --cd-accent: var(--cd-gin);     --cd-accent-br: var(--cd-gin-br); }
[data-cellar="vodka"]   { --cd-accent: var(--cd-vodka);   --cd-accent-br: var(--cd-vodka-br); }
[data-cellar="beer"]    { --cd-accent: var(--cd-beer);    --cd-accent-br: var(--cd-beer-br); }
[data-cellar="sake"]    { --cd-accent: var(--cd-sake);    --cd-accent-br: var(--cd-sake-br); }