/* ============================================================
   We Love Soho — Tokens
   Colors, type, spacing, radii, shadows, motion.
   Both modes ship together; neither is afterthought.
   ============================================================ */

/* ---- Webfonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@500;600;700;800&display=swap');

/* ============================================================
   Color palette — raw values
   ============================================================ */
:root {
  /* Ink scale — near-black with a hint of blue */
  --ink-12: #0B0D10;   /* deepest, true page bg in dark mode */
  --ink-11: #14171B;
  --ink-10: #1B1F24;   /* surface 1 in dark */
  --ink-9:  #232830;   /* surface 2 in dark — cards */
  --ink-8:  #2D333D;   /* surface 3 — hover */
  --ink-7:  #3A4250;
  --ink-6:  #525A69;
  --ink-5:  #6E7785;
  --ink-4:  #8B95A3;   /* tertiary text dark */
  --ink-3:  #A9B1BD;   /* secondary text dark */
  --ink-2:  #C9CFD8;
  --ink-1:  #E2E6EC;   /* primary text dark */

  /* Chalk scale — very light slate (cool) */
  --chalk-12: #FCFCFD;
  --chalk-11: #F6F8FB;  /* page bg in light mode */
  --chalk-10: #EEF1F5;  /* surface 1 in light */
  --chalk-9:  #E3E8EF;  /* surface 2 — cards */
  --chalk-8:  #D2D9E2;  /* hover */
  --chalk-7:  #B6BFCB;
  --chalk-6:  #94A0AE;
  --chalk-5:  #74808E;
  --chalk-4:  #5A6573;
  --chalk-3:  #424B57;
  --chalk-2:  #2C333D;
  --chalk-1:  #131820;  /* primary text light */

  /* Soho Red — the accent */
  --red-12: #FFF1ED;
  --red-11: #FFD9CC;
  --red-10: #FF9C82;
  --red-9:  #FF6B47;
  --red-8:  #E94E2B;
  --red-7:  #C93E1F;   /* primary CTA */
  --red-6:  #A33218;
  --red-5:  #7A2511;
  --red-4:  #50180B;

  /* Moss — secondary / success / verified */
  --moss-11: #E6EDDD;
  --moss-9:  #8FA771;
  --moss-7:  #5C7A3F;   /* status: open, active, verified */
  --moss-5:  #3D5429;
  --moss-3:  #1F2D14;

  /* Amber — warning / ends soon */
  --amber-11: #FBE9C8;
  --amber-9:  #E5A845;
  --amber-7:  #B97D1A;
  --amber-5:  #6B470A;

  /* Slate — info, link */
  --slate-11: #DCE6EC;
  --slate-9:  #6F8EA1;
  --slate-7:  #436173;
  --slate-5:  #2A3E4A;
}

/* ============================================================
   Semantic tokens — light mode (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:        var(--chalk-11);
  --surface-1: var(--chalk-10);
  --surface-2: var(--chalk-9);
  --surface-3: var(--chalk-8);
  --surface-inverse: var(--ink-11);

  /* Text */
  --fg-1: var(--chalk-1);   /* primary */
  --fg-2: var(--chalk-3);   /* secondary */
  --fg-3: var(--chalk-5);   /* tertiary */
  --fg-on-accent: var(--chalk-12);
  --fg-on-inverse: var(--ink-1);

  /* Borders / hairlines */
  --border-1: rgba(31, 28, 22, 0.10);
  --border-2: rgba(31, 28, 22, 0.18);
  --border-strong: rgba(31, 28, 22, 0.40);

  /* Accent */
  --accent: var(--red-7);
  --accent-hover: var(--red-6);
  --accent-soft: var(--red-12);
  --accent-fg: var(--chalk-12);

  /* Semantic */
  --success: var(--moss-7);
  --success-soft: var(--moss-11);
  --warning: var(--amber-7);
  --warning-soft: var(--amber-11);
  --danger: var(--red-7);
  --danger-soft: var(--red-12);
  --info: var(--slate-7);
  --info-soft: var(--slate-11);

  /* Focus */
  --focus-ring: var(--red-7);

  /* Shadows — soft, layered, low-opacity. Always two layers: a tight
     hairline + a wider ambient. Read as light, never as drop-shadow. */
  --shadow-xs:    0 1px 0 rgba(19, 24, 32, 0.04), 0 1px 2px rgba(19, 24, 32, 0.04);
  --shadow-sm:    0 1px 2px rgba(19, 24, 32, 0.05), 0 2px 6px -1px rgba(19, 24, 32, 0.06);
  --shadow-md:    0 2px 4px rgba(19, 24, 32, 0.05), 0 8px 18px -4px rgba(19, 24, 32, 0.10);
  --shadow-lg:    0 4px 10px -2px rgba(19, 24, 32, 0.08), 0 16px 36px -8px rgba(19, 24, 32, 0.14);
  --shadow-xl:    0 8px 20px -4px rgba(19, 24, 32, 0.10), 0 32px 64px -16px rgba(19, 24, 32, 0.20);
  --shadow-accent: 0 2px 4px rgba(19, 24, 32, 0.08), 0 16px 36px -8px rgba(19, 24, 32, 0.20);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.65);   /* top-edge highlight on raised surfaces */

  /* Aliases for legacy refs */
  --shadow-card:       var(--shadow-sm);
  --shadow-sheet:      var(--shadow-lg);
  --shadow-membership: var(--shadow-accent);

  /* Gradients — tonal only. Each gradient stays within its own scale
     (ink→ink, chalk→chalk, red→red). Never cross hue families.
     Keep the delta to one step on the scale: subtle, never decorative. */
  --grad-surface:    linear-gradient(180deg, var(--chalk-12) 0%, var(--chalk-10) 100%);
  --grad-surface-2:  linear-gradient(180deg, var(--chalk-11) 0%, var(--chalk-9) 100%);
  --grad-accent:     linear-gradient(135deg, var(--red-7) 0%, var(--red-6) 100%);
  --grad-accent-soft:linear-gradient(180deg, var(--red-12) 0%, var(--chalk-11) 100%);
  --grad-hero:       radial-gradient(120% 80% at 0% 0%, var(--chalk-12) 0%, var(--chalk-10) 60%, var(--chalk-9) 100%);
  --grad-membership: linear-gradient(160deg, var(--chalk-1) 0%, var(--chalk-2) 100%);
  --grad-divider:    linear-gradient(90deg, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);

  /* Tab bar blur */
  --bar-bg: rgba(246, 248, 251, 0.78);
}

/* ============================================================
   Semantic tokens — dark mode
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        var(--ink-12);
  --surface-1: var(--ink-10);
  --surface-2: var(--ink-9);
  --surface-3: var(--ink-8);
  --surface-inverse: var(--chalk-11);

  --fg-1: var(--ink-1);
  --fg-2: var(--ink-3);
  --fg-3: var(--ink-4);
  --fg-on-accent: var(--chalk-12);
  --fg-on-inverse: var(--chalk-1);

  --border-1: rgba(226, 230, 236, 0.08);
  --border-2: rgba(226, 230, 236, 0.14);
  --border-strong: rgba(226, 230, 236, 0.32);

  --accent: var(--red-7);
  --accent-hover: var(--red-8);
  --accent-soft: rgba(233, 78, 43, 0.14);
  --accent-fg: var(--chalk-12);

  --success: var(--moss-9);
  --success-soft: rgba(143, 167, 113, 0.14);
  --warning: var(--amber-9);
  --warning-soft: rgba(229, 168, 69, 0.14);
  --danger: var(--red-9);
  --danger-soft: rgba(233, 78, 43, 0.14);
  --info: var(--slate-9);
  --info-soft: rgba(111, 142, 161, 0.14);

  --focus-ring: var(--red-9);

  /* Shadows — in dark mode, drop-shadow can't lift a surface; use a
     faint inset top-edge highlight to suggest elevation, plus a soft
     ambient on the surface below. */
  --shadow-xs:    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-sm:    inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:    inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px -4px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-xl:    inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px -8px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --shadow-card:       var(--shadow-sm);
  --shadow-sheet:      var(--shadow-lg);
  --shadow-membership: var(--shadow-accent);

  /* Gradients — dark surfaces use a top-down lift (lighter at top) to
     mimic real raised material. */
  --grad-surface:    linear-gradient(180deg, var(--ink-9) 0%, var(--ink-10) 100%);
  --grad-surface-2:  linear-gradient(180deg, var(--ink-8) 0%, var(--ink-9) 100%);
  --grad-accent:     linear-gradient(180deg, var(--red-7) 0%, var(--red-6) 100%);
  --grad-accent-soft:linear-gradient(180deg, rgba(201, 62, 31, 0.18) 0%, rgba(201, 62, 31, 0.04) 100%);
  --grad-hero:       radial-gradient(120% 80% at 0% 0%, var(--ink-10) 0%, var(--ink-11) 60%, var(--ink-12) 100%);
  --grad-membership: linear-gradient(160deg, var(--ink-11) 0%, var(--ink-9) 100%);
  --grad-divider:    linear-gradient(90deg, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);

  --bar-bg: rgba(11, 13, 16, 0.78);
}

/* ============================================================
   Type — families & scale
   ============================================================ */
:root {
  --font-display: 'Hanken Grotesk', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (mobile-first, designed for 390px viewport) */
  --t-display-xl: 40px / 44px var(--font-display);  /* splash, big editorial */
  --t-display-l:  32px / 38px var(--font-display);  /* page hero on landing surfaces */
  --t-display-m:  24px / 30px var(--font-display);  /* shelf headers on Discover */
  --t-h1:         28px / 34px var(--font-ui);       /* section titles */
  --t-h2:         20px / 26px var(--font-ui);       /* card titles, sheet titles */
  --t-h3:         17px / 22px var(--font-ui);       /* list-row title */
  --t-body:       15px / 22px var(--font-ui);
  --t-body-s:     13px / 18px var(--font-ui);
  --t-label:      14px / 18px var(--font-ui);       /* form labels, button text */
  --t-caption:    12px / 16px var(--font-ui);       /* metadata */
  --t-eyebrow:    11px / 14px var(--font-ui);       /* MEMBERSHIP, NEW THIS WEEK */
  --t-mono:       13px / 18px var(--font-mono);

  /* Weights */
  --fw-display: 500;
  --fw-display-bold: 600;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
}

/* ============================================================
   Spacing scale (4px base)
   ============================================================ */
:root {
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-14: 56px;
  --s-18: 72px;

  /* Page padding (mobile horizontal) */
  --page-pad: 20px;
}

/* ============================================================
   Radii
   ============================================================ */
:root {
  --r-xs:  4px;   /* chips, tiny badges */
  --r-sm:  8px;   /* inputs, secondary buttons, list rows */
  --r-md: 12px;   /* signature card radius */
  --r-lg: 20px;   /* sheets, membership card */
  --r-pill: 999px;
}

/* ============================================================
   Motion
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 0.6, 1);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-accent: 240ms;
  --d-large: 320ms;
}

/* ============================================================
   Element-level semantic styles
   These can be applied directly via class names that mirror
   the token name, e.g. <h1 class="t-h1">…</h1>
   ============================================================ */
html, body {
  font: var(--t-body);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display-xl  { font: var(--t-display-xl); font-weight: var(--fw-display); letter-spacing: -0.02em; }
.t-display-l   { font: var(--t-display-l);  font-weight: var(--fw-display); letter-spacing: -0.02em; }
.t-display-m   { font: var(--t-display-m);  font-weight: var(--fw-display); letter-spacing: -0.01em; }
.t-h1          { font: var(--t-h1);         font-weight: var(--fw-semi);    letter-spacing: -0.01em; }
.t-h2          { font: var(--t-h2);         font-weight: var(--fw-semi);    letter-spacing: -0.005em; }
.t-h3          { font: var(--t-h3);         font-weight: var(--fw-semi); }
.t-body        { font: var(--t-body);       font-weight: var(--fw-regular); }
.t-body-s      { font: var(--t-body-s);     font-weight: var(--fw-regular); }
.t-label       { font: var(--t-label);      font-weight: var(--fw-medium); }
.t-caption     { font: var(--t-caption);    font-weight: var(--fw-regular); color: var(--fg-2); }
.t-eyebrow     { font: var(--t-eyebrow);    font-weight: var(--fw-semi); letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-2); }
.t-mono        { font: var(--t-mono); }

/* The wordmark style — used for the We Love Soho lockup */
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* Focus ring — never remove */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}