/*
 * Design tokens — the single source of truth for every value in the UI.
 *
 * Colour, type, radius, shadow and motion values are taken verbatim from
 * design_handoff_cork_and_code/README.md, which is a high-fidelity spec: the numbers
 * are intentional, not approximations to taste.
 *
 * Spacing and type-scale tokens are additions. The original repo's tokens.css defined
 * colours only, so every size in styles.css was a hardcoded literal — which is what made
 * that stylesheet impossible to adjust coherently.
 */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --paper: #F7F4EF;           /* app background, warm off-white */
  --card: #FFFFFF;            /* cards, list rows, inputs */
  --paper-sunk: #EFEAE3;      /* recessed areas */

  /* ---- Ink --------------------------------------------------------------- */
  --ink: #1C1B19;             /* primary text */
  --ink-charcoal: #1F1A16;    /* primary buttons — Apple-style near-black */
  --text-secondary: #6E6A64;  /* labels, secondary body */
  --text-muted: #9C958B;      /* captions, meta */
  --text-faint: #A6A099;      /* mono labels at their lightest */

  /* ---- Lines ------------------------------------------------------------- */
  --hairline: rgba(28, 27, 25, .06);
  --hairline-strong: rgba(28, 27, 25, .08);

  /* ---- Accent ------------------------------------------------------------ */
  /* Bordeaux. The prototype also defines Coastal #2C6E72, Dusk #7B3F8E and
     Noir #B0823C; overriding --wine is all it takes to reskin the app. */
  --wine: #8C2F46;
  --wine-soft: rgba(140, 47, 70, .07);
  --wine-soft-strong: rgba(140, 47, 70, .10);
  --wine-hero-shadow: 0 18px 42px -14px rgba(140, 47, 70, .6);

  /* ---- Status ------------------------------------------------------------ */
  --good: #3E7C4F;            /* correct guesses, positive states */
  --good-mark: #4B8B5B;
  --good-soft: rgba(74, 135, 93, .12);
  --amber: #B07B34;

  /* ---- Wine category "liquid colors" ------------------------------------- */
  /* The only consistent colour pops in the design. --*-glass is the deeper shade
     used to fill the SVG tasting glass. */
  --cat-red: #B23A52;      --cat-red-on: #fff;      --cat-red-glass: #7d1f33;
  --cat-white: #D9BE73;    --cat-white-on: #4a3d12; --cat-white-glass: #cdb968;
  --cat-spark: #E7D89B;    --cat-spark-on: #4a4117; --cat-spark-glass: #ddca7f;
  --cat-rose: #E18CA0;     --cat-rose-on: #5e2333;  --cat-rose-glass: #e890a6;
  --cat-dessert: #C98545;  --cat-dessert-on: #fff;  --cat-dessert-glass: #bd7430;

  /* ---- Type -------------------------------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
             'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --size-wordmark: 40px;
  --size-title: 26px;        /* screen titles, Newsreader 500 */
  --size-wine-name: 29px;    /* wine name on a detail page */
  --size-heading: 21px;
  --size-subheading: 19px;
  --size-lead: 17px;
  --size-body: 15px;
  --size-body-sm: 14px;
  --size-caption: 12px;
  --size-eyebrow: 11px;      /* mono, uppercase */
  --size-eyebrow-sm: 10px;
  --size-score: 44px;        /* the big star numeral */

  --lh-tight: 1.25;
  --lh-body: 1.55;
  --tracking-title: -.01em;
  --tracking-eyebrow: .18em;  /* spec range is .1–.22em */
  --tracking-mono: .1em;

  /* ---- Spacing ----------------------------------------------------------- */
  --gutter: 24px;            /* standard screen padding */
  --gutter-wide: 30px;       /* sign-in */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- Shape ------------------------------------------------------------- */
  --radius-sm: 14px;
  --radius-row: 16px;
  --radius-card: 18px;
  --radius-feature: 22px;
  --radius-hero: 24px;
  --radius-pill: 980px;      /* fully rounded buttons */

  /* ---- Shadows ----------------------------------------------------------- */
  --shadow-card: 0 4px 18px rgba(28, 27, 25, .04);
  --shadow-raised: 0 12px 34px -12px rgba(28, 27, 25, .16);
  --shadow-feature: 0 16px 38px -16px rgba(28, 27, 25, .32);
  --shadow-cta: 0 10px 26px -10px rgba(31, 26, 22, .55);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);   /* the house curve */
  --dur-screen: .5s;
  --dur-rise: .6s;
  --dur-pop: .55s;
  --dur-quick: .25s;

  /* ---- Layout ------------------------------------------------------------ */
  --app-max-width: 430px;    /* design target is 390px logical */
  --tabbar-height: 62px;
}

/* The design is a single warm light theme by intent — "keep it light" is as much a
   product decision as the palette. A dark-mode variant would need its own token set
   and its own review, so the app opts out rather than letting the browser invert it. */
:root {
  color-scheme: light;
}