/* ─────────────────────────────────────────────────────────────────────────
   SipMarked design tokens.

   Source of truth: sipmarked-app/constants/theme.ts (+ category colours
   from components/WineCard.tsx, screen-local off-whites from app/wine/tag.tsx
   and app/(tabs)/profile.tsx).

   Use the semantic role variables (--bg, --fg, --primary, --h1, etc.)
   in component CSS — never re-quote the raw scale values. That way a
   future brand refresh only edits this file.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand colours ───────────────────────────────────────────────────── */
  --wine-900: #4a1620;          /* primary-dark — hover / press on web         */
  --wine-700: #722f37;          /* primary — splash, CTAs, active tints        */
  --wine-700-overlay: rgba(92, 24, 38, 0.55);   /* header watercolor overlay   */
  --wine-700-wash:    rgba(114, 47, 55, 0.08);  /* drag-hover / secondary hover */

  /* ── Neutrals (warm stone) ───────────────────────────────────────────── */
  --stone-50:  #f9f9f9;         /* background — app body                       */
  --stone-100: #f5f4f1;         /* locked-field background (tag form)          */
  --stone-150: #f3eedb;         /* selected-row tint + "reading the label" pill (warm cream) */
  --stone-200: #f3f3f3;         /* sign-out neutral button                     */
  --stone-300: #d6d3d1;         /* border, divider, empty star                 */
  --stone-500: #a8a29e;         /* text-muted, placeholder                     */
  --stone-700: #78716c;         /* text-secondary                              */
  --stone-900: #1c1917;         /* text — primary body                         */
  --white:     #ffffff;         /* surface — cards, inputs, header chrome      */

  /* ── Semantic state ──────────────────────────────────────────────────── */
  --success:    #15803d;
  --success-bg: #dcfce7;
  --error:      #b91c1c;
  --notes-fg:   #5b4a00;        /* "Reading the label…" text on cream pill     */

  /* ── Wine category palette (used on photo-less thumbnails only) ─────── */
  --cat-red:       #8B2035;
  --cat-white:     #C8A96E;
  --cat-rose:      #E8A0A0;
  --cat-sparkling: #C0B04A;
  --cat-dessert:   #9B6B8A;
  --cat-fortified: #7A5C38;
  --cat-other:     #6B7280;

  /* ── Semantic colour roles ──────────────────────────────────────────── */
  --bg:           var(--stone-50);
  --surface:      var(--white);
  --surface-alt:  var(--stone-100);

  --fg:           var(--stone-900);
  --fg-secondary: var(--stone-700);
  --fg-muted:     var(--stone-500);
  --fg-inverse:   var(--white);

  --primary:        var(--wine-700);
  --primary-strong: var(--wine-900);
  --primary-fg:     var(--white);

  --border:        var(--stone-300);
  --divider:       var(--stone-300);

  /* ── Type stack ──────────────────────────────────────────────────────── */
  /* Substitution: the Expo binary has no bundled webfont — iOS uses SF,
     Android uses Roboto. On the web we fall through to Inter (closest
     neutral grotesque) and finally system-ui. If the brand has a real
     webfont, drop it in fonts/ and prepend its family name here. */
  --font-sans:
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Apple Color Emoji", "Segoe UI Emoji",
    sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ── Type scale (from the codebase, top→bottom) ──────────────────────── */
  --fs-display: 28px;   /* auth screen titles                                 */
  --fs-h1:      22px;   /* screen titles (Collection, Tag the wine)           */
  --fs-h2:      18px;   /* modal titles                                       */
  --fs-h3:      16px;   /* section titles, large buttons                      */
  --fs-body:    16px;   /* default input / nav row label                      */
  --fs-input:   16px;
  --fs-card:    15px;   /* wine-card title, signOut, primary CTA              */
  --fs-meta:    14px;   /* secondary buttons, switch row body                 */
  --fs-label:   13px;   /* field labels, helper text                          */
  --fs-small:   12px;   /* chips, list footer, address                        */
  --fs-kicker:  11px;   /* uppercase eyebrow ("FILTER", "TASTING CORNER")     */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.45;

  --tracking-wide:  0.5px;   /* uppercase section labels                      */
  --tracking-wider: 1px;     /* TASTING CORNER kicker                         */

  /* ── Spacing scale (theme.spacing) ───────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* ── Radii (theme.radius) ────────────────────────────────────────────── */
  --radius-sm:     8px;     /* tiny chips, small inputs                       */
  --radius-md:     12px;    /* cards, inputs, modal rows                      */
  --radius-lg:     20px;
  --radius-pill:   999px;   /* every CTA and every filter chip                */
  --radius-header: 28px;    /* the brand-header bottom corners (signature)    */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
}

/* ─── Semantic typography roles ──────────────────────────────────────────
   Use these classes (or @extend-like copy them into your component CSS)
   so every screen titles, labels, kickers etc. identically.
   ──────────────────────────────────────────────────────────────────────── */

html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }

.sm-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.sm-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.sm-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.sm-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.sm-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg);
}
.sm-card-title {
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}
.sm-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
}
.sm-meta {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--fg-secondary);
}
.sm-muted {
  color: var(--fg-muted);
}
.sm-kicker {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
}
.sm-kicker-neutral {
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sm-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}