/*
 * BW design tokens — CSS custom properties.
 * Source of truth: ../tokens.json (Variant 1 — Quiet Editorial).
 *
 * No consumer yet. When the web app lands, import this once at :root level
 * and reference tokens as var(--bw-color-primary), etc.
 */

:root {
  /* Color — light */
  --bw-color-surface:         #FAF7F2;
  --bw-color-surface-variant: #EFEAE0;
  --bw-color-ink:             #1A1611;
  --bw-color-ink-muted:       #5C5852;
  --bw-color-primary:         #2C5F3D;
  --bw-color-on-primary:      #FFFFFF;
  --bw-color-outline:         #C8C2B7;
  --bw-color-error:           #9B2C2C;
  --bw-color-on-error:        #FFFFFF;

  /* Price delta — light */
  --bw-color-delta-up:        #B3261E;
  --bw-color-delta-down:      #1B5E20;
  --bw-color-delta-flat:      var(--bw-color-ink-muted);

  /* Honesty verdict — light. Color is enhancement only; the verbatim label
     (components.md #26) is always the load-bearing cue. positive = the two
     "good price" verdicts; neutral (= ink-muted) = the other four. Never a
     warning colour anywhere — calm / anti-gamified voice. */
  --bw-color-honesty-positive: #1B5E20;
  --bw-color-honesty-neutral:  var(--bw-color-ink-muted);

  /* Scrim — web surface only (like Layout below, this is NOT in the
     cross-platform tokens.json). The category-picker overlay's mobile
     bottom-sheet backdrop dim (components.md W-15). The mobile platforms use
     their own native dialog scrim, so this token has no android/ios analog.
     A backdrop DIM, not an elevation shadow — the "no shadows" rule
     (components.md § "Tokens not in scope for v1") still holds. */
  --bw-color-scrim:           rgba(26, 22, 17, 0.32);

  /* Type families */
  --bw-font-family-display:   serif;
  --bw-font-family-body:      sans-serif;
  --bw-font-family-mono:      monospace;

  /* Type scale (size / line-height / weight) */
  --bw-font-display-lg-size:    32px;
  --bw-font-display-lg-lh:      40px;
  --bw-font-display-lg-weight:  600;
  --bw-font-display-md-size:    28px;
  --bw-font-display-md-lh:      36px;
  --bw-font-display-md-weight:  600;
  --bw-font-headline-md-size:   22px;
  --bw-font-headline-md-lh:     28px;
  --bw-font-headline-md-weight: 600;
  --bw-font-title-md-size:      18px;
  --bw-font-title-md-lh:        24px;
  --bw-font-title-md-weight:    600;
  --bw-font-body-lg-size:       18px;
  --bw-font-body-lg-lh:         26px;
  --bw-font-body-md-size:       16px;
  --bw-font-body-md-lh:         24px;
  --bw-font-body-sm-size:       14px;
  --bw-font-body-sm-lh:         20px;
  --bw-font-label-lg-size:      14px;
  --bw-font-label-lg-lh:        20px;
  --bw-font-label-lg-weight:    500;
  --bw-font-label-md-size:      13px;
  --bw-font-label-md-lh:        18px;
  --bw-font-label-md-weight:    500;
  --bw-font-label-sm-size:      11px;
  --bw-font-label-sm-lh:        16px;
  --bw-font-label-sm-weight:    500;

  /* Spacing */
  --bw-spacing-xxs:  2px;
  --bw-spacing-xs:   4px;
  --bw-spacing-sm:   8px;
  --bw-spacing-smd: 12px;
  --bw-spacing-md:  16px;
  --bw-spacing-mlg: 20px;
  --bw-spacing-lg:  24px;
  --bw-spacing-xl:  32px;
  --bw-spacing-xxl: 48px;

  /* Radius */
  --bw-radius-none:  0px;
  --bw-radius-sm:    4px;
  --bw-radius-md:    8px;
  --bw-radius-lg:   12px;

  /* Motion */
  --bw-motion-fast:  150ms;
  --bw-motion-med:   250ms;
  --bw-motion-slow:  400ms;
  --bw-motion-easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);

  /* Chart — price sparkline / history curve (components.md #28 / #33). The web
     SVG curve reuses the same stroke + soft-gradient-fill language as the
     mobile Canvas; theme-independent (the colour comes from the honesty tokens). */
  --bw-chart-sparkline-stroke-width:     2px;
  --bw-chart-sparkline-marker-radius:    4px;
  --bw-chart-sparkline-fill-alpha-start: 0.24;
  --bw-chart-sparkline-fill-alpha-end:   0;
  --bw-chart-history-vertical-headroom:  0.08;

  /* Chart — category market-price surfaces (web-only; components.md W-11 / W-13).
     The shaded-fill alphas over color.primary: the fan-chart p25–p75 band and the
     distribution histogram bars. Geometry stays as builder literals (per the DS
     "colour/alpha = token, geometry = literal" policy); only the alphas are tokens. */
  --bw-chart-band-fill-alpha:      0.12;
  --bw-chart-histogram-fill-alpha: 0.42;

  /* Layout — web surface only (the mobile platforms have no container/grid
     concept, so these live here, not in the cross-platform tokens.json). The
     desktop page max width + the result-grid minimum card width. The responsive
     breakpoint itself is a literal px in bw-web.css — CSS @media queries can't
     read custom properties. See components.md § "Web (discovery surface)". */
  --bw-layout-container-max: 1140px;
  --bw-layout-grid-min:      232px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bw-color-surface:         #0F0D0A;
    --bw-color-surface-variant: #1C1916;
    --bw-color-ink:             #F0EDE7;
    --bw-color-ink-muted:       #A8A4A0;
    --bw-color-primary:         #A8D5A0;
    --bw-color-on-primary:      #0F2515;
    --bw-color-outline:         #3A3631;
    --bw-color-error:           #F2B8B5;
    --bw-color-on-error:        #3A0F0F;

    --bw-color-delta-up:        #F2B8B5;
    --bw-color-delta-down:      #A5D6A7;
    --bw-color-delta-flat:      var(--bw-color-ink-muted);

    --bw-color-honesty-positive: #A5D6A7;
    --bw-color-honesty-neutral:  var(--bw-color-ink-muted);

    --bw-color-scrim:           rgba(0, 0, 0, 0.55);
  }
}