/* =====================================================
   FunnelPlayer — Design Tokens
   Drop this file into your project and consume via var().
   ===================================================== */

:root {
  /* ---------- Brand ---------- */
  --fp-ember:        #E5482A;  /* Primary — play button, CTAs, brand */
  --fp-ember-600:    #C93C20;  /* Hover / pressed */
  --fp-ember-100:    #FBE3DA;  /* Tinted backgrounds, badges */

  --fp-ink:          #0F2A3D;  /* Headings, brand on light surfaces */
  --fp-stage:        #0A0B10;  /* Player chrome, dark surfaces */
  --fp-paper:        #FBF8F4;  /* Marketing / app background */

  /* ---------- Neutrals (paper-warm scale for marketing) ---------- */
  --fp-paper-50:     #FBF8F4;
  --fp-paper-100:    #F1ECE3;
  --fp-paper-200:    #D9D2C5;
  --fp-paper-500:    #8C8576;
  --fp-paper-800:    #403B33;
  --fp-paper-950:    #1A1814;

  /* ---------- Neutrals (cool stage scale for the player) ---------- */
  --fp-stage-950:    #0A0B10;
  --fp-stage-900:    #13151D;
  --fp-stage-800:    #1E212C;
  --fp-stage-700:    #3A3F50;
  --fp-stage-400:    #8C92A6;
  --fp-stage-50:     #EDEFF5;

  /* ---------- Semantic ---------- */
  --fp-success:      #2E8B57;
  --fp-warning:      #D89B1F;
  --fp-error:        #C3361B;
  --fp-info:         #2B6FB2;

  /* ---------- Typography ---------- */
  --fp-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fp-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fp-weight-regular: 400;
  --fp-weight-medium:  500;
  --fp-weight-semibold: 600;
  --fp-weight-bold:    700;

  /* Type scale (rem-based, 16px root) */
  --fp-text-xs:      0.75rem;   /* 12 */
  --fp-text-sm:      0.875rem;  /* 14 */
  --fp-text-base:    1rem;      /* 16 */
  --fp-text-lg:      1.125rem;  /* 18 */
  --fp-text-xl:      1.375rem;  /* 22 */
  --fp-text-2xl:     1.75rem;   /* 28 */
  --fp-text-3xl:     2.25rem;   /* 36 */
  --fp-text-4xl:     3rem;      /* 48 */
  --fp-text-5xl:     4rem;      /* 64 */

  --fp-leading-tight: 1.1;
  --fp-leading-snug:  1.35;
  --fp-leading-body:  1.55;

  --fp-tracking-tight: -0.02em;
  --fp-tracking-normal: 0;
  --fp-tracking-wide:  0.08em;  /* For uppercase eyebrows */

  /* ---------- Spacing (4px base) ---------- */
  --fp-space-1:      0.25rem;   /* 4 */
  --fp-space-2:      0.5rem;    /* 8 */
  --fp-space-3:      0.75rem;   /* 12 */
  --fp-space-4:      1rem;      /* 16 */
  --fp-space-5:      1.5rem;    /* 24 */
  --fp-space-6:      2rem;      /* 32 */
  --fp-space-7:      3rem;      /* 48 */
  --fp-space-8:      4rem;      /* 64 */
  --fp-space-9:      6rem;      /* 96 */

  /* ---------- Radii ---------- */
  --fp-radius-sm:    4px;
  --fp-radius-md:    8px;
  --fp-radius-lg:    12px;
  --fp-radius-xl:    16px;
  --fp-radius-pill:  999px;

  /* ---------- Shadows ---------- */
  --fp-shadow-sm:    0 1px 2px rgba(15, 42, 61, 0.06);
  --fp-shadow-md:    0 4px 12px rgba(15, 42, 61, 0.08);
  --fp-shadow-lg:    0 12px 32px rgba(15, 42, 61, 0.12);
  --fp-shadow-ember: 0 12px 32px rgba(229, 72, 42, 0.33);

  /* ---------- Motion ---------- */
  --fp-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --fp-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --fp-duration-fast: 120ms;
  --fp-duration-base: 200ms;
  --fp-duration-slow: 400ms;
}