/* ============================================================
   ROBIOS DESIGN TOKENS — extracted live from higgsfield.ai
   via Playwright (2026-07-13, desktop 1440px). LAW, not vibes.
   ============================================================ */

:root {
  /* ---------- Backgrounds ---------- */
  --bg-base: #0F1113;               /* body background (rgb 15,17,19) */
  --bg-card: #1C1E20;               /* primary card surface (most used: 137x) */
  --bg-elevated: #23262A;           /* elevated surface / hover (rgb 35,38,42) */
  --bg-elevated-75: rgba(35, 38, 42, 0.75);
  --bg-overlay-glass: rgba(21, 23, 30, 0.80);  /* --color-surface-elevated #15171ECC */
  --bg-white-5: rgba(255, 255, 255, 0.05);
  --bg-white-10: rgba(255, 255, 255, 0.10);
  --bg-terminal: #0A0C0D;           /* terminal panels, slightly darker than base */

  /* ---------- Accent: signature acid lime ---------- */
  --accent: #D1FE17;                /* NOT classic green. rgb(209,254,23) */
  --accent-text-on: #131517;        /* dark text on lime buttons */
  --accent-05: rgba(209, 254, 23, 0.05);
  --accent-08: rgba(209, 254, 23, 0.08);  /* Login button bg */
  --accent-20: rgba(209, 254, 23, 0.20);  /* soft badge bg */
  --accent-24: rgba(209, 254, 23, 0.24);
  --accent-glow: rgba(209, 254, 23, 0.50); /* focus/glow ring */

  /* ---------- Secondary accents ---------- */
  --hot-pink: #FF005B;              /* promo / discount / trending badges */
  --pink-gradient: radial-gradient(39.71% 136.54% at 51.64% 117.31%, #F920D1 0%, #ED1572 100%);
  --lime-gold-gradient: linear-gradient(74deg, #D1FE17 0.76%, #FED717 39%, #D1FE17 109%);
  --red-down: #FF4D4D;              /* negative numbers in dashboards */

  /* ---------- Text ---------- */
  --text-primary: #F7F7F8;          /* rgb(247,247,248) */
  --text-secondary: rgba(255, 255, 255, 0.60);  /* #fff9 */
  --text-muted: #A8A8A8;            /* nav links, meta */
  --text-faint: rgba(255, 255, 255, 0.50);

  /* ---------- Typography ---------- */
  /* SF Pro (user's pick, 2026-07-16): webfont via cdnfonts on non-Apple
     devices, native SF through -apple-system on Apple ones. Inter stays
     as the loaded fallback so text never falls to a random sans. */
  --font-ui: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* headings, UPPERCASE */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;     /* terminal sections */
  --fs-base: 16px;  --lh-base: 24px;
  --fs-nav: 14px;   --fw-nav: 500;
  --fs-card-title: 16px; --fw-card-title: 700;    /* Space Grotesk, uppercase */
  --ls-display: -0.04em;                          /* letter-spacing -4% on display type */
  --fs-badge: 10px; --fw-badge: 700;
  --fs-meta: 12px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;        /* small controls (146x) */
  --radius-btn: 10px;      /* buttons Login/Sign up */
  --radius-card: 12px;     /* default card (168x — most used) */
  --radius-card-lg: 16px;  /* media/app cards (41x) */
  --radius-badge: 6px;
  --radius-pill: 9999px;   /* filter tabs */
  --radius-prompt: 24px;   /* big prompt bar (apps page) */

  /* ---------- Shadows ---------- */
  --inset-highlight: inset 0 1.5px 3px 0 rgba(255, 255, 255, 0.05); /* top edge light on cards */
  --inset-highlight-soft: inset 0 2px 3px 0 rgba(255, 255, 255, 0.03);
  --shadow-card-xl: 0 32px 24px 0 rgba(0, 0, 0, 0.15), 0 6px 4px 0 rgba(0, 0, 0, 0.25);
  --ring-accent: 0 0 0 2px var(--accent-glow);
  --card-glass-sheen: linear-gradient(130deg, rgba(255,255,255,0.03) 22.6%, rgba(255,255,255,0.043) 51.26%, rgba(255,255,255,0.016) 79.9%);

  /* ---------- Layout ---------- */
  --promo-banner-h: 48px;  /* lime top banner, black text */
  --nav-h: 44px;           /* slim main nav on #0F1113 */
  --grid-gap: 8px;         /* app-card grids are TIGHT: 8-9px */
  --grid-gap-featured: 12px;
  --card-col-w: 348px;     /* 4-col app grid at 1440px */
  --content-max: 1440px;   /* nearly full-bleed, ~8-16px edge padding */

  /* ---------- Motion (extracted from higgsfield.ai computed transitions) ---------- */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);      /* dominant: colors/opacity (468 elements) */
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);    /* card hover transforms, 0.3s */
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* slow media zoom, 0.7s */
  --dur-fast: 0.2s;
  --dur-med: 0.3s;
  --dur-slow: 0.7s;
}