/* =============================================================================
   Bake+ — Design tokens
   Single source of truth for colour, type, spacing and motion.
   Nothing outside this file hard-codes a colour (hexadecimal, rgb(), hsl() or a named
   one) or a pixel ramp value; web-tests/lints/colours.test.js holds the colours.
   ========================================================================== */

:root {
  /* --- Brand palette (verbatim from the Bake+ palette sheet) ---------------
     These five are the only raw brand hex values in the codebase.
     Everything else is a semantic alias derived from them.                  */
  --brand-honey-cream:    #F6E5C9; /* Soft Honey Cream */
  --brand-rustic-apricot: #D9824A; /* Rustic Apricot */
  --brand-terra-spice:    #A65633; /* Terra Spice — active / selected state */
  --brand-golden-amber:   #E78567; /* Golden Amber */
  --brand-ember-espresso: #5C3827; /* Ember Espresso */

  /* The order book's sticky notes: the yellow of the post-it and the orange of its paperclip.
     Used on those notes only. */
  --sticky-paper: #FDF1A3;
  --sticky-clip:  #F0A071;

  /* The one hue outside the brand sheet. Every brand colour is a brown, and
     none of them can say "good news" next to Terra Spice saying "bad news".
     Deepened until it clears 4.5:1 at 12px on the cream cards (measures
     ~4.9:1); a lighter sage read as "sauge" but fell to 3.3:1. */
  --brand-sage: #55714A;

  /* Cream ramp, extended from Soft Honey Cream toward paper white so the light
     UI has three levels of depth without leaving the brand hue. */
  --brand-cream-50:  #FDF9F1; /* lightest — content ground */
  --brand-cream-100: #FBF2E3;
  --brand-cream-200: var(--brand-honey-cream);
  --brand-cream-300: #EBD5B3; /* deepest cream — separators on panel */

  /* --- Semantic surfaces --------------------------------------------------
     Light theme: the content area is the lightest plane, the sidebar is
     tinted, and boxes sitting on the sidebar are lighter again so they read
     as cards rather than as holes.                                          */
  --surface-app:    var(--brand-cream-50);
  --surface-panel:  var(--brand-cream-200);
  --surface-raised: var(--brand-cream-100);
  --surface-hover:  var(--brand-cream-50);

  /* --- Ink ----------------------------------------------------------------
     A single ink colour, thinned with transparency for lower emphasis.
     `--pattern-ink` is what decorative fills (textures, hairlines) mix from;
     keeping it separate is what lets a theme flip without touching app.css. */
  --ink: var(--brand-ember-espresso);
  --pattern-ink: var(--brand-ember-espresso);

  /* Emphasis ramp. On a light ground, thinning ink toward the background loses
     contrast far faster than it does on a dark one, so these percentages stay
     high: at 48% the 11px labels measured 2.3:1, well under the 4.5:1 floor.
     Every value below is verified against WCAG AA at its rendered size. */
  --text-primary:   var(--ink);
  /* Text on the brown chips and filled buttons. */
  --text-on-dark:   var(--brand-honey-cream);
  --text-secondary: color-mix(in srgb, var(--ink) 88%, transparent);
  --text-muted:     color-mix(in srgb, var(--ink) 80%, transparent);

  /* --- Semantic borders ---------------------------------------------------
     Borders are non-text UI, so the bar is 3:1, not 4.5:1. */
  --border-subtle:  color-mix(in srgb, var(--ink) 20%, transparent);
  --border-default: color-mix(in srgb, var(--ink) 30%, transparent);
  --border-strong:  var(--brand-rustic-apricot);
  --border-active:  var(--brand-terra-spice);

  /* --- Accents ------------------------------------------------------------ */
  --accent:        var(--brand-rustic-apricot);

  /* Rustic Apricot is a decorative and border colour: at 11px on cream it
     measures 2.3:1, so it must never carry small text. `--accent-text` is the
     text-safe accent — Terra Spice pulled toward the ink until it clears AA. */
  --accent-text:   color-mix(in srgb, var(--brand-terra-spice) 75%, var(--ink));
  --accent-strong: var(--brand-terra-spice);
  --accent-warm:   var(--brand-golden-amber);
  --accent-deep:   var(--brand-ember-espresso);

  /* Directional signals. Fewer losses is good, more is bad. */
  --positive: var(--brand-sage);
  --negative: var(--brand-terra-spice);

  /* Product families, used wherever the three are shown side by side
     (weekly loss bars, legends). All three are brand browns; kept as their
     own aliases so a chart never reaches for a raw brand token. */
  --family-bakery:   var(--brand-ember-espresso);
  --family-snacking: var(--brand-terra-spice);
  --family-pastry:   var(--brand-rustic-apricot);

  /* Translucent accent washes behind active states. */
  --accent-wash:        color-mix(in srgb, var(--brand-terra-spice) 12%, transparent);
  --accent-wash-subtle: color-mix(in srgb, var(--brand-terra-spice) 7%, transparent);

  /* --- The categorical palette of the charts --------------------------------
     Six colours, one per series, in this order and never another: the order is what keeps
     two neighbours apart for a colour-blind reader. Validated as a set against both cream
     grounds (the six checks of the data-viz method: lightness band, chroma floor, CVD
     separation of neighbours >= 8 ΔE, normal-vision separation >= 15 ΔE, contrast >= 3:1);
     web-tests/chartsPalette.test.js runs those checks again, so a colour changed here
     without re-validating fails.

     Slot 1 is the brand's Terra Spice. The brand sheet is five browns and a sage, and browns
     cannot be told apart from each other (Terra Spice and Rustic Apricot measure 14.8 ΔE,
     under the floor), so slots 2 to 6 are new steps: a slate blue, a pine, a plum, a golden
     crust and a lavender, at the chroma of the brand's own hues so they sit with the creams
     rather than shout. They are written in OKLCH, the space the checks measure in.

     No sage-like green: sage is `--positive`, and a series must never pass for good news.
     Beyond three series, lines and bars only (neighbours touch): scatter plots and small
     multiples hold three at most. There is no dark mode in the app (index.html declares
     `color-scheme: light`), so none here. */
  --chart-series-1: var(--brand-terra-spice);
  --chart-series-2: oklch(0.46 0.105 260);  /* slate blue */
  --chart-series-3: oklch(0.62 0.12 170);   /* pine */
  --chart-series-4: oklch(0.46 0.11 340);   /* plum */
  --chart-series-5: oklch(0.64 0.11 80);    /* golden crust */
  --chart-series-6: oklch(0.64 0.105 285);  /* lavender */

  /* --- The paper ----------------------------------------------------------
     What the shop prints and what the iPad shows as the printed page: pure black on pure
     white, whatever the theme. Greys and creams are the first thing a photocopier loses. */
  --paper:     white;
  --paper-ink: black;

  /* --- Typography --------------------------------------------------------- */
  /* Same stacks as the Bake+ marketing site, so the two properties match. */
  --font-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  /* Display face for the weather hero: Fraunces again, but at its heaviest
     weight with the SOFT axis maxed, which turns it bulbous and curvy. One
     family across the product; the axis settings do the character work. */
  --font-display: var(--font-serif);
  --font-display-weight: 900;
  --font-display-variation: "SOFT" 100, "opsz" 144;

  --text-2xs: 0.6875rem; /* 11px — box meta */
  --text-xs:  0.75rem;   /* 12px — labels, tab text */
  --text-sm:  0.8125rem; /* 13px — body small */
  --text-base: 0.9375rem;/* 15px — body */
  --text-lg:  1.125rem;  /* 18px — section titles */
  --text-xl:  1.5rem;    /* 24px — view title */

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* --- Spacing scale (4px base) ------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* --- Radii, borders, motion --------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --stroke: 1px;
  /* 2px, not 1.5px: sub-pixel border widths round down to 1px at DPR 1, so a
     1.5px "active" border renders identically to the inactive one. */
  --stroke-active: 2px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* --- Layout ------------------------------------------------------------- */
  --sidebar-width: 264px;
  --header-height: 88px;
}

/* Respect the OS setting for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* The veil behind a modal dialog: Ember Espresso at 45 %. It is written out rather than derived
   from --ink, and declared on ::backdrop itself as well as on :root, because before Safari 17.4
   a ::backdrop reads nothing :root defines and a var() there paints nothing. Dialogs that are
   their own veil (the bottom sheets, the name window) read it as a token. */
:root,
::backdrop {
  --scrim: rgba(92, 56, 39, 0.45);
}