/* =========================================================================
   Playces — Colors & Type tokens
   -------------------------------------------------------------------------
   The Playces design language: a warm-sunset palette built for "evening,
   gathering, festival" — saffron carries the energy, plum carries the
   trust/safety weight, cream is the canvas. Two product skins share one
   token spine:
     • GUEST app  → saffron + plum + cream  (the default :root below)
     • VENDOR app → rose + dusty-plum + peach (.theme-vendor overrides)

   Type: Bricolage Grotesque (display), DM Sans (UI/body), JetBrains Mono
   (numerics, countdowns, codes). All three are Google Fonts (CDN below).

   STATUS: derived from the playce-app codebase (Claude/Repos/playce-app)
   and the v0.2 brand wordmark spec. Brand identity is still under the
   Branding workstream — treat saffron/plum as the working system.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───────── Color: brand — saffron (energy) ───────── */
  --saffron-50:  #FDEEE6;
  --saffron-100: #FAD7C5;
  --saffron-200: #F4B193;
  --saffron-300: #ED8B61;
  --saffron-400: #E85D2F;   /* PRIMARY — CTAs, accents, the live pulse */
  --saffron-500: #C9461C;   /* hover */
  --saffron-600: #9D3415;   /* press */
  --saffron-700: #6E2410;

  /* logo "y" stroke is a slightly warmer orange than saffron-400 */
  --saffron-y:   #F07830;

  /* ───────── Color: brand — plum (trust / evening) ───────── */
  --plum-50:  #F1ECF5;
  --plum-100: #DCD0E5;
  --plum-200: #B49EC5;
  --plum-300: #7E6296;
  --plum-400: #4A2F6B;
  --plum-500: #2B1640;     /* SECONDARY — deep evening, inverse surfaces */
  --plum-600: #1D0F2D;
  --plum-700: #110919;

  /* ───────── Color: cream (canvas) ───────── */
  --cream-50:  #FFFCF6;
  --cream-100: #FAF3E7;    /* page bg (light) */
  --cream-200: #F2E8D4;
  --cream-300: #ECE0CB;    /* surface-2 / sand */
  --cream-400: #D9C9AB;
  --cream-500: #B8A37F;

  /* ───────── Color: ink (text) ───────── */
  --ink-50:  #5C544C;      /* tertiary / meta */
  --ink-100: #423B33;      /* body */
  --ink-200: #2B2520;
  --ink-300: #1A1410;      /* primary text on light */
  --ink-400: #0B0805;

  /* ───────── Color: semantic ───────── */
  --sage-100: #DEEBE0;
  --sage-300: #93B696;
  --sage-500: #5E8A6B;     /* verified / positive / "won" */
  --sage-700: #38593F;

  --brick-100: #F4DAD5;
  --brick-300: #D88176;
  --brick-500: #B33A2E;    /* alert / cancel / "lost" */
  --brick-700: #7A1F16;

  --gold-100: #FAEBC8;
  --gold-300: #F0CC74;
  --gold-500: #E8B447;     /* highlight / Premium tier / top pick */
  --gold-700: #9A7220;

  /* ───────── Functional tokens (light surface — default) ───────── */
  --bg-page:       var(--cream-100);
  --bg-surface:    #FFFCF6;
  --bg-surface-2:  var(--cream-300);
  --bg-inverse:    var(--plum-500);

  --fg-1:          var(--ink-300);   /* primary text */
  --fg-2:          var(--ink-100);   /* body */
  --fg-3:          var(--ink-50);    /* tertiary / meta */
  --fg-on-saffron: #FFFCF6;
  --fg-on-plum:    var(--cream-100);

  --border-1:      rgba(26, 20, 16, 0.10);
  --border-2:      rgba(26, 20, 16, 0.18);
  --border-strong: var(--ink-300);

  --accent:        var(--saffron-400);
  --accent-hover:  var(--saffron-500);
  --accent-press:  var(--saffron-600);

  /* ───────── Type families ───────── */
  --font-display: "Bricolage Grotesque", "Georgia", serif;
  --font-sans:    "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* ───────── Type scale (mobile-first; one ladder) ───────── */
  --t-display-xl: 700 56px/0.95 var(--font-display);
  --t-display-l:  700 44px/1.00 var(--font-display);
  --t-display-m:  700 32px/1.05 var(--font-display);
  --t-display-s:  600 24px/1.15 var(--font-display);
  --t-title-l:    600 20px/1.25 var(--font-sans);
  --t-title-m:    600 17px/1.30 var(--font-sans);
  --t-title-s:    600 15px/1.35 var(--font-sans);
  --t-body-l:     400 16px/1.50 var(--font-sans);
  --t-body-m:     400 15px/1.50 var(--font-sans);
  --t-body-s:     400 13px/1.45 var(--font-sans);
  --t-label:      600 12px/1.20 var(--font-sans);
  --t-mono:       500 13px/1.40 var(--font-mono);

  /* ───────── Spacing (4px base) ───────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* ───────── Radii ─────────
     Soft outer radii (cards, sheets) + snappier inner radii (chips, inputs).
     Pill (999px) for every tappable affordance — buttons, chips, badges. */
  --r-1: 6px;  --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px;
  --r-pill: 999px;

  /* ───────── Shadow / elevation ─────────
     Warm-tinted shadows (toward plum) instead of neutral grey. Soft,
     diffused — premium-marketplace feel, not material-design hard drops. */
  --shadow-1: 0 1px 0 rgba(43, 22, 64, 0.04), 0 1px 2px rgba(43, 22, 64, 0.06);
  --shadow-2: 0 2px 4px rgba(43, 22, 64, 0.06), 0 8px 16px rgba(43, 22, 64, 0.08);
  --shadow-3: 0 8px 16px rgba(43, 22, 64, 0.08), 0 24px 40px rgba(43, 22, 64, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 246, 0.6), inset 0 -1px 0 rgba(43, 22, 64, 0.06);

  /* ───────── Motion ─────────
     ease-out for entrances, ease-spring for tappable feedback. Fast and
     subtle — nothing bounces gratuitously. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* =========================================================================
   VENDOR skin — softer rose / dusty-plum / peach.
   Apply class="theme-vendor" on a root container to retint a vendor surface.
   Same token names, different values — components don't change.
   ========================================================================= */
.theme-vendor {
  --saffron-400: #CB6F88;   /* rose primary */
  --saffron-500: #A85068;   /* hover / press */
  --saffron-600: #A85068;
  --accent:       #CB6F88;
  --accent-hover: #A85068;
  --accent-press: #A85068;

  --plum-500: #5B4878;      /* dusty plum */
  --plum-600: #3F2F58;
  --plum-400: #7A6494;

  --cream-100: #FDF2E1;     /* light peach page */
  --cream-50:  #FFFAF0;
  --cream-300: #F5C996;     /* peach sand / chips */

  --ink-300: #2A2030;       /* purple-tinted dark */
  --ink-100: #52465E;
  --ink-50:  #7A7080;

  --gold-500: #F5C996;      /* peach gold */
  --gold-100: #FDE9CC;

  /* vendor-only accent: soft blush */
  --blush:     #EBA5AC;
  --blush-100: #F8DCE0;

  --bg-page:    var(--cream-100);
  --bg-surface: var(--cream-50);
  --fg-1: var(--ink-300); --fg-2: var(--ink-100); --fg-3: var(--ink-50);
  --border-1: rgba(42,32,48,0.10);
  --border-2: rgba(42,32,48,0.18);
}

/* ───────── Semantic element styling ───────── */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--t-body-m);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font: var(--t-display-l); letter-spacing: -0.02em;  color: var(--fg-1); margin: 0; }
h2 { font: var(--t-display-m); letter-spacing: -0.015em; color: var(--fg-1); margin: 0; }
h3 { font: var(--t-display-s); letter-spacing: -0.01em;  color: var(--fg-1); margin: 0; }
h4 { font: var(--t-title-l); color: var(--fg-1); margin: 0; }
h5 { font: var(--t-title-m); color: var(--fg-1); margin: 0; }
h6 { font: var(--t-title-s); color: var(--fg-1); margin: 0; }
p  { font: var(--t-body-m); color: var(--fg-2); margin: 0; }
small { font: var(--t-body-s); color: var(--fg-3); }
code, kbd, samp { font: var(--t-mono); background: var(--cream-300); padding: 1px 6px; border-radius: var(--r-1); }
a { color: var(--saffron-500); text-decoration: none; }
a:hover { color: var(--saffron-600); text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow / label — the workhorse small-caps tracking label used everywhere */
.eyebrow {
  font: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
}