/* ============================================================
   OUTSCALED — DESIGN TOKENS v1.1 (2026-07-16)
   Single source of truth for every surface: website, app,
   documents, social, forms. The living brandbook renders these
   at outscaled-brand.vercel.app.

   v1.1: gold ramp rebuilt around Electric Gold #F0C24D;
   wordmark/editorial serif = Playfair Display Italic (regular
   weight, NEVER bold); signal yellow #FEDF58 added, sandboxed
   to top-of-funnel thumbnails only.

   Rules that travel with these tokens:
   - Gold is ONE primary accent per view. Never two gold elements
     competing on the same screen.
   - Green/red are reserved for deltas and status. Never decorative.
   - Wordmark is monochrome; the period may take gold on dark
     marketing surfaces only.
   - Numbers in data contexts always use tabular-nums.
   ============================================================ */

:root {
  /* ---- Ink (warm black ramp) ---- */
  --os-ink-900: #14110f;  /* deepest surface, marketing dark bg */
  --os-ink-800: #1c1917;  /* warm black, primary dark surface + text on light */
  --os-ink-700: #292420;  /* raised dark surface */
  --os-ink-600: #3d3731;  /* borders on dark, muted elements */

  /* ---- Paper (warm light ramp) ---- */
  --os-paper-50:  #faf9f7; /* lightest raised surface */
  --os-paper-100: #f0efed; /* canonical paper, light mode bg */
  --os-paper-200: #e5e2dd; /* light mode borders, dividers */
  --os-paper-300: #ccc7bf; /* stronger light borders */

  /* ---- Gold (the accent — Electric Gold ramp, v1.1) ---- */
  --os-gold-200: #f7e3ac;  /* subtle fills, gold text on gold */
  --os-gold-300: #f5d88a;  /* soft gold text on dark */
  --os-gold-400: #f0c24d;  /* PRIMARY gold on dark surfaces */
  --os-gold-500: #e0a52a;  /* hover, gradient deep end */
  --os-gold-600: #c7962e;  /* PRIMARY gold on light surfaces */
  --os-gold-700: #97701f;  /* deep gold, pressed states */
  --os-gold-ink: #241b05;  /* text on gold buttons */

  /* Signal yellow: TOF thumbnails/reel covers/carousel covers ONLY.
     Never landing pages, product, proposals, documents. */
  --os-signal-yellow: #fedf58;

  /* ---- Semantic (deltas + status ONLY) ---- */
  --os-green: #16a34a;
  --os-green-dark: #4ade80;  /* on dark surfaces */
  --os-red: #dc2626;
  --os-red-dark: #f87171;    /* on dark surfaces */

  /* ---- Typography ---- */
  --os-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --os-font-wordmark-serif: 'Playfair Display', Georgia, serif; /* "out" — italic, 400, NEVER bold */
  --os-font-wordmark-sans: 'Poppins', sans-serif;               /* "scaled." — 700 only */
  --os-font-editorial: 'Playfair Display', Georgia, serif;      /* pull quotes, italic accents */

  /* Type scale (rem) */
  --os-text-xs: 0.75rem;    /* 12 — labels, captions */
  --os-text-sm: 0.875rem;   /* 14 — UI default, tables */
  --os-text-base: 1rem;     /* 16 — body */
  --os-text-lg: 1.1875rem;  /* 19 — lead paragraphs */
  --os-text-xl: 1.5rem;     /* 24 — section titles */
  --os-text-2xl: 2rem;      /* 32 — page titles */
  --os-text-3xl: 2.75rem;   /* 44 — hero */
  --os-text-4xl: 3.5rem;    /* 56 — marketing hero desktop */

  /* ---- Space (4px base) ---- */
  --os-space-1: 4px;
  --os-space-2: 8px;
  --os-space-3: 12px;
  --os-space-4: 16px;
  --os-space-5: 24px;
  --os-space-6: 32px;
  --os-space-7: 48px;
  --os-space-8: 64px;
  --os-space-9: 96px;

  /* ---- Radii ---- */
  --os-radius-sm: 6px;    /* chips, small controls */
  --os-radius-md: 10px;   /* inputs, buttons */
  --os-radius-lg: 14px;   /* cards */
  --os-radius-pill: 999px;

  /* ---- Shadows / glow ---- */
  --os-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --os-glow-gold: 0 6px 22px rgba(224, 165, 42, 0.26);
}

/* ---- Dark surface contexts (marketing lead, app dark mode) ---- */
.os-dark {
  --os-bg: var(--os-ink-900);
  --os-surface: rgba(255, 255, 255, 0.035);
  --os-surface-2: rgba(255, 255, 255, 0.02);
  --os-border: rgba(240, 239, 237, 0.10);
  --os-border-strong: rgba(240, 239, 237, 0.16);
  --os-text: var(--os-paper-100);
  --os-text-muted: rgba(240, 239, 237, 0.55);
  --os-text-faint: rgba(240, 239, 237, 0.38);
  --os-accent: var(--os-gold-400);
  --os-accent-soft: rgba(224, 165, 75, 0.14);
  --os-accent-border: rgba(224, 165, 75, 0.28);
  --os-delta-up: var(--os-green-dark);
  --os-delta-down: var(--os-red-dark);
}

/* ---- Light surface contexts (documents, app light mode) ---- */
.os-light {
  --os-bg: var(--os-paper-100);
  --os-surface: #ffffff;
  --os-surface-2: var(--os-paper-50);
  --os-border: var(--os-paper-200);
  --os-border-strong: var(--os-paper-300);
  --os-text: var(--os-ink-800);
  --os-text-muted: #55504a;
  --os-text-faint: #8a847c;
  --os-accent: var(--os-gold-600);
  --os-accent-soft: rgba(184, 134, 46, 0.10);
  --os-accent-border: rgba(184, 134, 46, 0.30);
  --os-delta-up: var(--os-green);
  --os-delta-down: var(--os-red);
}

/* ---- Primary CTA (dark surfaces): the gold gradient ---- */
.os-btn-gold {
  background: linear-gradient(180deg, var(--os-gold-400), var(--os-gold-500));
  color: var(--os-gold-ink);
  box-shadow: var(--os-glow-gold);
  border: none;
  border-radius: var(--os-radius-md);
  font-weight: 600;
}