/* ============================================================================
 * FiveSwipe Design System — Tokens (handoff copy)
 * @font-face declarations are NOT included here to avoid duplication with the
 * root design system. Font loading for this bundle is handled via the inline
 * <style> block in holding-page.html (Rigo 400, Rigo 700, DIN Condensed 700).
 * When deploying, ensure your build system loads fonts from the fonts/ folder.
 * ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────── */

/* ── DIN Neuzeit Grotesk Bold Condensed ────────────────────────────────────
 * The DISPLAY / HERO face. Replaces Rigo Black for big statements (too
 * heavy/wide at size). Also the hero face on consumer social cards
 * ("TOP FIVE", "BOTTOM FIVE", "HIGH FIVE!"). Condensed, bold, uppercase. */

/* ── PD Everyday ───────────────────────────────────────────────────────────
 * The CONSUMER "human" voice — a marker-pen / handwritten face. Used for
 * personal soundbites on social cards ("just got swiped into my all-time",
 * "It's not me, it's you!"). CONSUMER-FACING ONLY — never product UI or the
 * brand dashboard. Pairs with DIN Condensed + hand-drawn doodles. */

/* Editorial serif (Playfair Display) — RETIRED Jun '26. DIN Condensed + Rigo
 * carry every hero; the serif read incoherent beside them. Do not reintroduce. */

/* ============================================================================
 * Brand primitives — never use these raw in components; use semantic tokens.
 * ========================================================================== */

:root {
  /* ── Brand pink — the only primary, on every surface ─────────────────── */
  --fs-pink:            #EE3674;
  --fs-pink-hover:      #f24c87;   /* +6% L — hover lift */
  --fs-pink-press:      #d92964;   /* -4% L — press */
  --fs-pink-faint:      rgba(238, 54, 116, 0.20);
  --fs-pink-glow:       rgba(238, 54, 116, 0.95);
  --fs-pink-wash:       rgba(238, 54, 116, 0.08);

  /* ── Consumer PLAYFUL palette (the social-card brand language) ───────────
   * Extracted from the finalised social sentiment cards. This is the loud,
   * consumer-facing identity — distinct from the product's dark app chrome
   * and the brand dashboard's slate. Embodies the pink guardrail in the
   * wild: positive = PINK on YELLOW, negative = BLUE-GREY on CHARCOAL
   * (never red). */
  --fs-yellow:          #F7D700;   /* positive / Top ground — bright golden */
  --fs-yellow-deep:     #EFC500;   /* shadow / pattern tone on yellow */
  --fs-charcoal:        #202123;   /* negative / Bottom ground */
  --fs-charcoal-2:      #2a2b2e;   /* tone-on-tone pattern on charcoal */
  --fs-bluegrey:        #9DB4C8;   /* negative accent + doodles on dark ("BOTTOM FIVE", "SIGH FIVE") */
  --fs-bluegrey-deep:   #6E8597;   /* deeper blue-grey */
  --fs-ink:             #1a1a1a;   /* social-card footer bar / black on yellow */

  /* ── Consumer neutrals (deep blue-black) ─────────────────────────────── */
  --fs-blue-000:        #080810;
  --fs-blue-100:        #0d0d1a;
  --fs-blue-200:        #13131f;
  --fs-blue-300:        #18182a;
  --fs-blue-400:        #1c1c2e;

  /* ── Brand neutrals (slate) ──────────────────────────────────────────── */
  --fs-slate-900:       #0f172a;
  --fs-slate-800:       #1e293b;
  --fs-slate-750:       #253347;
  --fs-slate-700:       #334155;
  --fs-slate-600:       #475569;
  --fs-slate-500:       #64748b;
  --fs-slate-400:       #94a3b8;
  --fs-slate-300:       #cbd5e1;
  --fs-slate-100:       #f1f5f9;
  --fs-slate-050:       #f8fafc;

  /* ── Neutral grey (default brand grey used in marks, light backgrounds) */
  --fs-grey-900:        #1a1a1a;
  --fs-grey-700:        #404040;
  --fs-grey-base:       #626362;     /* the official brand "dark grey" */
  --fs-grey-300:        #d4d4d4;
  --fs-grey-100:        #ebebf0;
  --fs-grey-050:        #f5f5f7;

  /* ── Sentiment — the PINK GUARDRAIL (brand principle) ────────────────────
   * Pink is NEVER used in a negative context (no "FiveSwipe = bad" adjacency,
   * despite the closeness to red). Brand intent:
   *     Top / positive  → PINK   (life, power, significance)
   *     Bottom / negative → GREY  (muted, neutral — not red)
   * Red is held in reserve for *true* errors only (failed action, lost data).
   * NB: the current mobile + dashboard CODE still uses green/red for Top/Bottom.
   *     Aligning implementation to this guardrail is an open task. */
  --fs-sentiment-top:    var(--fs-pink);
  --fs-sentiment-bottom: var(--fs-grey-base);
  --fs-error:            #ef4444;     /* reserve for genuine errors only */

  /* ── Legacy state colours (current code; under review vs. guardrail) ───── */
  --fs-positive:        #22c55e;     /* consumer dark mode */
  --fs-positive-bright: #4ade80;     /* dashboard / on dark */
  --fs-positive-light:  #16a34a;     /* light mode */
  --fs-negative:        #ef4444;
  --fs-negative-bright: #f87171;
  --fs-negative-light:  #dc2626;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --fs-font-sans:       "Rigo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-font-display:    "DIN Condensed", "Rigo", system-ui, sans-serif;   /* hero statements */
  --fs-font-marker:     "PD Everyday", "Rigo", system-ui, sans-serif;      /* consumer human voice */
  --fs-font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

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

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --fs-radius-xs: 4px;
  --fs-radius-sm: 6px;
  --fs-radius-md: 8px;
  --fs-radius-lg: 12px;
  --fs-radius-xl: 16px;
  --fs-radius-2xl: 18px;
  --fs-radius-3xl: 26px;
  --fs-radius-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --fs-shadow-sm:    0 1px 2px rgba(0,0,0,0.20);
  --fs-shadow-card:  0 8px 24px rgba(0,0,0,0.4);
  --fs-shadow-pop:   0 8px 24px rgba(0,0,0,0.5);
  --fs-shadow-modal: 0 25px 50px rgba(0,0,0,0.5);
  --fs-shadow-lift:  0 8px 20px rgba(0,0,0,0.5);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --fs-ease-std:     cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --fs-ease-out:     cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --fs-dur-quick:    150ms;                           /* @kind other */
  --fs-dur-base:     250ms;                           /* @kind other */
  --fs-dur-reveal:   450ms;                           /* @kind other */
}

/* ============================================================================
 * Semantic tokens — Consumer surface (dark, default for the mobile app)
 * Map by setting `data-surface="consumer"` on <html> or any subtree.
 * Defaults to consumer surface if no override.
 * ========================================================================== */

:root,
[data-surface="consumer"] {
  --bg:           var(--fs-blue-000);
  --surface:      var(--fs-blue-200);
  --surface-2:    var(--fs-blue-400);
  --surface-modal:var(--fs-blue-300);
  --tab-bar:      var(--fs-blue-100);

  --primary:        var(--fs-pink);
  --primary-faint:  var(--fs-pink-faint);
  --primary-glow:   var(--fs-pink-glow);

  --fg:           #f0f0f8;
  --fg-muted:     rgba(240, 240, 248, 0.40);
  --fg-inverse:   #111111;

  --border:       rgba(255, 255, 255, 0.07);
  --border-mid:   rgba(255, 255, 255, 0.18);

  --positive:     var(--fs-positive);
  --negative:     var(--fs-negative);

  --overlay:      rgba(0, 0, 0, 0.72);
  --scrim:        rgba(8, 8, 16, 0.18);
}

/* ── Consumer surface, light variant (stub, awaiting validation) ──────── */
[data-surface="consumer"][data-theme="light"] {
  --bg:           var(--fs-grey-050);
  --surface:      #ffffff;
  --surface-2:    var(--fs-grey-100);
  --surface-modal:#ffffff;
  --tab-bar:      #ffffff;
  --fg:           #111111;
  --fg-muted:     rgba(0, 0, 0, 0.42);
  --border:       rgba(0, 0, 0, 0.08);
  --border-mid:   rgba(0, 0, 0, 0.16);
  --positive:     var(--fs-positive-light);
  --negative:     var(--fs-negative-light);
  --overlay:      rgba(0, 0, 0, 0.52);
  --scrim:        rgba(245, 245, 247, 0.18);
}

/* ============================================================================
 * Semantic tokens — Brand surface (slate, dashboard + retailer-facing web)
 * ========================================================================== */

[data-surface="brand"] {
  --bg:           var(--fs-slate-900);
  --surface:      var(--fs-slate-800);
  --surface-2:    var(--fs-slate-750);
  --surface-modal:var(--fs-slate-800);
  --tab-bar:      var(--fs-slate-800);

  --primary:        var(--fs-pink);
  --primary-faint:  var(--fs-pink-faint);
  --primary-glow:   var(--fs-pink-glow);

  --fg:           var(--fs-slate-050);
  --fg-muted:     var(--fs-slate-400);
  --fg-subtle:    var(--fs-slate-500);
  --fg-mid:       var(--fs-slate-300);
  --fg-subdued:   var(--fs-slate-600);

  --border:       var(--fs-slate-700);
  --border-mid:   var(--fs-slate-600);

  --positive:     var(--fs-positive-bright);
  --negative:     var(--fs-negative-bright);

  --error-bg:     #450a0a;
  --overlay:      rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * Semantic tokens — Marketing surface (graphite, editorial) — CONSUMER marketing
 * Dark ground; pink hero statements + DIN/Rigo. No serif.
 * ========================================================================== */

[data-surface="marketing"] {
  --bg:           #111114;
  --bg-gradient:  radial-gradient(120% 80% at 50% 0%, #1a1a22 0%, #0a0a0e 70%);
  --surface:      #1a1a22;
  --surface-2:    #22222c;

  --primary:        var(--fs-pink);
  --primary-faint:  var(--fs-pink-faint);

  --fg:           #ffffff;
  --fg-muted:     rgba(255, 255, 255, 0.62);
  --fg-subtle:    rgba(255, 255, 255, 0.40);

  --border:       rgba(255, 255, 255, 0.10);
  --border-mid:   rgba(255, 255, 255, 0.22);
}

/* ============================================================================
 * Semantic tokens — Brand-marketing surface (warm paper, premium) — A1c, Jun '26
 * The retailer/B2B marketing world. Light warm-paper ground; the dark slate
 * dashboard is staged on top of it. Pink hero + ink; NO accent colour on light
 * (accents go muddy on warm paper). Distinct from the dark CONSUMER marketing.
 * ========================================================================== */

[data-surface="brand-marketing"] {
  --bg:            #EBE2D1;   /* warm-paper ground */
  --bg-gradient:   radial-gradient(125% 95% at 50% 0%, #F7F1E4 0%, #EBE2D0 78%);
  --surface:       #FBF7EF;   /* warm-ivory card */
  --surface-2:     #F4ECDD;
  --raise:         #ffffff;

  --primary:        var(--fs-pink);
  --primary-faint:  var(--fs-pink-faint);

  --fg:            #26231D;   /* warm ink */
  --fg-strong:     #171511;
  --fg-muted:      #756C5C;   /* warm taupe */
  --fg-subtle:     #A89E8B;

  --border:        rgba(38, 35, 29, 0.12);
  --border-mid:    rgba(38, 35, 29, 0.22);

  --sentiment-top:    var(--fs-pink);
  --sentiment-bottom: var(--fs-grey-base);

  --device-shadow: 0 50px 90px rgba(70, 55, 25, 0.26);
  --overlay:       rgba(38, 35, 29, 0.45);
}

/* ============================================================================
 * Typography — semantic classes you can drop on any element
 *
 * Scale (px):
 *   display:  56 / 72  — marketing hero
 *   h1:       40        — page lead
 *   h2:       28        — section
 *   h3:       20        — subsection
 *   body:     15        — default
 *   small:    13        — secondary
 *   micro:    11        — uppercase labels (always tracked 0.05em)
 * ========================================================================== */

html, body {
  font-family: var(--fs-font-sans);
  color: var(--fg, var(--fs-slate-050));
  background: var(--bg, var(--fs-blue-000));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.fs-display, h1.fs-display {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Consumer "human" soundbite — marker-pen voice, sentence case, slight tilt. */
.fs-marker {
  font-family: var(--fs-font-marker);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
}

.fs-h1 {
  font-family: var(--fs-font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.fs-h2 {
  font-family: var(--fs-font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.fs-h3 {
  font-family: var(--fs-font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.fs-body {
  font-family: var(--fs-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
}

.fs-body-lg {
  font-family: var(--fs-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
}

.fs-small {
  font-family: var(--fs-font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.fs-micro,
.fs-label {
  font-family: var(--fs-font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle, var(--fg-muted));
}

.fs-tracked {
  /* The PDF "F I V E S W I P E . C O M" mark — wide letter-spacing */
  font-family: var(--fs-font-sans);
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.fs-direction-label {
  /* "TOP 5" / "↑ TOP 5" — the loud, in-app semantic tag */
  font-family: var(--fs-font-sans);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Hero numbers (A1b — corrected Jun '26): the big FiveSwipe Score, metric-tile
 * values, sector percentile tiles, and AI-analysis headline stats are set in
 * RIGO BOLD. (DIN Condensed was trialled and rejected — too narrow/low-mass to
 * anchor a tile; Rigo Black too heavy. Rigo Bold has presence AND digests, and
 * matches the Rigo brand-name/titles already in the dashboard.) DIN stays
 * MARKETING-only. NOTE: large/prominent numbers ONLY — small & dense figures
 * (weekly tables, chart axes) MUST stay system font for legibility. */
.fs-score {
  font-family: var(--fs-font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.9;
  color: var(--primary);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}

.fs-score-sm {
  font-family: var(--fs-font-sans);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}

.fs-metric {
  font-family: var(--fs-font-sans);
  font-weight: 700;
  font-size: 38px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}

/* Editorial pink statement — now set in the condensed display face. */
.fs-statement {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fs-pink);
  text-wrap: balance;
}

/* ============================================================================
 * Consumer PLAYFUL surface — the social-card / loud-marketing identity.
 * Yellow ground for positive, charcoal for negative. Use data-tone to flip.
 * ========================================================================== */
[data-surface="playful"] {
  --bg:            var(--fs-yellow);
  --fg:            var(--fs-ink);
  --accent:        var(--fs-pink);
  --sentiment:     var(--fs-pink);
}
[data-surface="playful"][data-tone="negative"] {
  --bg:            var(--fs-charcoal);
  --fg:            #ffffff;
  --accent:        var(--fs-bluegrey);
  --sentiment:     var(--fs-bluegrey);
}