/* RaveRewards design tokens. Source of truth: docs/research/design_system.md section 3 (copied verbatim).
   Only tokens live here; components are in base.css, app shell in app.css. */
:root {
  color-scheme: dark;

  /* Surfaces: warm charcoal ramp shared with RaveClip */
  --bg: #0E0E12;               /* page */
  --bg-sunken: #0A0A0D;        /* footer, app sidebar, area behind modals */
  --surface: #16161C;          /* cards, panels, modal body */
  --surface-2: #1E1E26;        /* raised: inputs, dropdowns, toasts, popovers */
  --surface-3: #272730;        /* segmented thumb, hover on raised items */
  --surface-4: #30303A;        /* pressed or selected on raised */
  --scrim: rgba(6, 6, 9, 0.62);          /* modal backdrop, pair with blur(6px) */
  --glass: rgba(22, 22, 28, 0.72);       /* sticky nav, floating toolbars (blur 18px) */
  --glass-strong: rgba(22, 22, 28, 0.88);/* floating search when focused */
  --glass-media: rgba(10, 9, 12, 0.45);  /* chips and dots over imagery (blur 12px) */

  /* Translucent fills: use over ANY surface for hover, tracks, pills */
  --fill-1: rgba(255, 255, 255, 0.04);   /* row hover, skeleton on surface */
  --fill-2: rgba(255, 255, 255, 0.06);   /* segmented track, chip, progress track */
  --fill-3: rgba(255, 255, 255, 0.08);   /* secondary button, member pill */
  --fill-4: rgba(255, 255, 255, 0.12);   /* hover on fill-2 or fill-3 */
  --fill-5: rgba(255, 255, 255, 0.16);   /* switch off track, pressed */

  /* Lines */
  --border-subtle: rgba(255, 255, 255, 0.06);  /* table rows, panel dividers */
  --border: rgba(255, 255, 255, 0.08);         /* inputs, dropdowns, cards on hover */
  --border-strong: rgba(255, 255, 255, 0.14);  /* outline button, hovered input */
  --border-media: rgba(255, 255, 255, 0.10);   /* inset ring on thumbnails and avatars */

  /* Text (contrast measured on --bg / --surface) */
  --text: #F5F5F7;       /* 17.7 : 1 / 16.6 : 1  primary */
  --text-2: #B5B5C0;     /*  9.5 : 1 /  8.9 : 1  secondary, body copy */
  --text-3: #8A8A99;     /*  5.7 : 1 /  5.3 : 1  meta, labels (not on --surface-3 below 14px) */
  --text-4: #6E6E7C;     /*  3.8 : 1 /  3.6 : 1  placeholders, disabled, decorative only */
  --text-on-media: #FFFFFF;
  --text-on-media-2: rgba(255, 255, 255, 0.78);

  /* Accent: RaveClip amber */
  --accent: #FFB020;
  --accent-2: #FFCB5C;          /* gold highlight, selected chip text */
  --accent-3: #F59E0B;          /* deep amber, gradient end */
  --accent-hover: #FFBE47;
  --accent-press: #E89A05;
  --accent-soft: rgba(255, 176, 32, 0.14);
  --accent-softer: rgba(255, 176, 32, 0.08);
  --accent-border: rgba(255, 176, 32, 0.35);
  --on-accent: #17130A;         /* 10.1 : 1 on #FFB020 */

  /* Money: every payout, CPM, earning and balance */
  --money: #34D399;             /* 10.0 : 1 on --bg */
  --money-2: rgba(52, 211, 153, 0.72);   /* the "/1K" suffix */
  --money-soft: rgba(52, 211, 153, 0.12);/* CPM pill fill (7.5 : 1 text contrast) */

  /* Semantic */
  --success: #34D399;  --success-soft: rgba(52, 211, 153, 0.12);
  --warn:    #FB923C;  --warn-soft:    rgba(251, 146, 60, 0.14);
  --danger:  #FB5D5D;  --danger-soft:  rgba(251, 93, 93, 0.14);
  --info:    #6AA9FF;  --info-soft:    rgba(106, 169, 255, 0.14);

  /* Payout models (dots, model cards, chart series) */
  --model-cpm: #FFB020;
  --model-per-post: #C084FC;
  --model-retainer: #6AA9FF;

  /* Charts */
  --chart-1: #FFB020; --chart-2: #6AA9FF; --chart-3: #C084FC; --chart-4: #34D399;
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-area: linear-gradient(180deg, rgba(255, 176, 32, 0.20) 0%, rgba(255, 176, 32, 0) 100%);

  /* Gradients: WHITELIST ONLY (see section 12) */
  --grad-molten: linear-gradient(135deg, #FFCB5C 0%, #FFB020 48%, #F59E0B 100%);          /* logo, headline word, featured column */
  --grad-molten-btn: radial-gradient(120% 100% at 50% 0%, rgba(255, 214, 122, 0.95) 0%, rgba(255, 214, 122, 0) 62%),
                     linear-gradient(180deg, #FFB020 0%, #F59E0B 100%);                  /* primary buttons */
  --grad-announce: radial-gradient(70% 200% at 25% -40%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 65%),
                   linear-gradient(90deg, #FFB020 0%, #FFB020 70%, #F59E0B 100%);          /* announcement bar */
  --grad-ember-hero: radial-gradient(70% 55% at 50% 100%, rgba(245, 158, 11, 0.20) 0%, rgba(245, 158, 11, 0.06) 45%, rgba(245, 158, 11, 0) 75%);
  --grad-ember-card: radial-gradient(120% 85% at 50% 115%, rgba(255, 176, 32, 0.50) 0%, rgba(245, 158, 11, 0.18) 38%, rgba(245, 158, 11, 0) 70%);
  --grad-media-bottom: linear-gradient(180deg, rgba(10, 9, 12, 0) 45%, rgba(10, 9, 12, 0.6) 72%, rgba(10, 9, 12, 0.92) 100%);
  --grad-media-left: linear-gradient(90deg, rgba(10, 9, 12, 0.82) 0%, rgba(10, 9, 12, 0.35) 42%, rgba(10, 9, 12, 0) 68%);
  --grad-card-hover: linear-gradient(180deg, rgba(255, 176, 32, 0) 86%, rgba(255, 176, 32, 0.10) 104%);
  --grad-hairline: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  --grad-shimmer: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%);
  --grad-rank: linear-gradient(180deg, rgba(255, 176, 32, 0.22) 0%, rgba(255, 176, 32, 0) 85%);

  /* Radius */
  --r-2xs: 4px;   /* kbd, tiny tags */
  --r-xs: 6px;    /* delta chips, skeleton lines */
  --r-sm: 8px;    /* media badges, nav link hover, dropdown items */
  --r-md: 12px;   /* inputs, detail panels, rate tiles, model cards */
  --r-lg: 16px;   /* campaign card, stat tile, table, toast (14) */
  --r-xl: 20px;   /* dropdown panel, feature cards, mobile hero slide */
  --r-2xl: 24px;  /* hero slide, modal, CTA ember card, auth dialog */
  --r-3xl: 28px;  /* bottom sheet top corners, pricing table */
  --r-pill: 999px;/* every button, chip, pill, search bar, segmented control */

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --sh-2: 0 4px 16px rgba(0, 0, 0, 0.40);
  --sh-3: 0 12px 40px rgba(0, 0, 0, 0.50);
  --sh-4: 0 24px 80px rgba(0, 0, 0, 0.60);
  --sh-pop: 0 3px 6px rgba(0, 0, 0, 0.30), 0 12px 12px rgba(0, 0, 0, 0.26), 0 26px 16px rgba(0, 0, 0, 0.16), 0 47px 19px rgba(0, 0, 0, 0.05);
  --sh-lift: 0 6px 14px rgba(0, 0, 0, 0.28), 0 25px 25px rgba(0, 0, 0, 0.24), 0 56px 34px rgba(0, 0, 0, 0.14);  /* card hover */
  --sh-btn-accent: 0 6px 20px rgba(255, 176, 32, 0.28);
  --sh-sheet: 0 -12px 32px rgba(0, 0, 0, 0.60);
  --hi-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);                                 /* raised glass top edge */
  --hi-btn: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12);/* molten button bevel */
  --ring-card: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glow-accent: 0 0 24px rgba(255, 176, 32, 0.35);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Spacing: 4 px base, 8 px rhythm. 2 px and 6 px exist only inside pills. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px;

  /* Control heights */
  --h-xs: 24px;  /* pills, badges on cards */
  --h-sm: 32px;  /* small buttons, table actions */
  --h-md: 40px;  /* default button, nav CTA, chips 36 */
  --h-lg: 48px;  /* form submit, modal CTA on mobile */
  --h-xl: 56px;  /* hero CTAs, sheet footer CTA, mobile search */

  /* Layout */
  --container: 1220px;        /* marketing pages */
  --container-narrow: 720px;  /* FAQ, legal, auth */
  --container-app: 2200px;    /* discover and dashboard */
  --gutter: 24px;             /* 16px below 768px */
  --nav-h: 68px;              /* 60px below 768px */
  --announce-h: 40px;
  --section-y: clamp(64px, 9vw, 120px);

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Motion */
  --dur-1: 80ms;   /* hover intent delay, tooltip */
  --dur-2: 150ms;  /* color, background, press */
  --dur-3: 200ms;  /* switch, dropdown morph, toast in */
  --dur-4: 260ms;  /* modal in, button transform, image zoom */
  --dur-5: 300ms;  /* header hide, accordion, sheet, card glow */
  --dur-6: 420ms;  /* search bar expand, progress fill */
  --dur-7: 550ms;  /* card hover scale (slow and springy on purpose) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);         /* RaveClip default */
  --ease-emphasized: cubic-bezier(.23, 1, .32, 1); /* modal, search expand */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);     /* card hover, bottom sheet */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);       /* header, nav colors */
  --ease-in: cubic-bezier(.4, 0, 1, 1);            /* exits */
  --ease-accordion: cubic-bezier(.7, 0, 0, 1);     /* FAQ expand */

  /* Z index */
  --z-rail-arrows: 10; --z-floating-bar: 150; --z-nav: 200; --z-dropdown: 210;
  --z-sheet: 220; --z-modal: 300; --z-toast: 400; --z-tooltip: 500;
}
@media (max-width: 767px) { :root { --gutter: 16px; --nav-h: 60px; } }