/* ═══════════════════════════════════════════════════════════════════════════════
 * RUN.game Design System: Core Tokens
 * Source: client/components/ui/gluestack-ui-provider/config.ts
 *
 * RUN is a mobile gaming platform. Dark theme by default; the app ships
 * `light: vars(themeColors)` equal to `dark`, so dark is the canonical mode.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./fonts/WorkSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./fonts/WorkSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./fonts/WorkSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./fonts/WorkSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/Unbounded-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/Unbounded-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/Unbounded-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('./fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ─── Gray Scale (Figma styleguide) ────────────────────────────── */
  --gray-0:  #FCFCFB;
  --gray-1:  #F3F2F0;
  --gray-2:  #E6E5E2;
  --gray-3:  #D6D7D9;
  --gray-4:  #BFC2C7;
  --gray-5:  #9FA3A9;
  --gray-6:  #7F848B;
  --gray-7:  #5F646C;
  --gray-8:  #43484F;
  --gray-9:  #2A2E33;
  --gray-10: #15181B;
  --gray-11: #0D0F12;
  --gray-12: #07080A;

  /* ─── Accent Colors (the four brand accents) ───────────────────── */
  --orbit-blue:     #17CDFF;  /* "Orbit Blue": primary accent, the cursor */
  --launch-yellow:  #FFD23F;  /* "Launch Yellow": badges, highlights */
  --flux-green:     #2FE6B8;  /* "Flux Green": success */
  --crash-red:      #FF5A5A;  /* "Crash Red": destructive, errors */

  /* ─── Semantic tokens (map directly to Tailwind in app) ────────── */
  --color-foreground:            var(--gray-0);
  --color-foreground-secondary:  var(--gray-2);
  --color-foreground-tertiary:   var(--gray-6);
  --color-muted:                 var(--gray-4);

  --color-background:            var(--gray-12);  /* page bg */
  --color-overlay:               var(--gray-11);  /* sidebar / elevated */
  --color-surface:               var(--gray-10);  /* card bg */

  --color-border:                var(--gray-9);

  --color-accent:                var(--orbit-blue);
  --color-accent-foreground:     var(--gray-12);
  --color-destructive:           var(--crash-red);
  --color-success:               var(--flux-green);

  --color-primary:               var(--gray-0);    /* CTA white-on-dark */
  --color-primary-foreground:    var(--gray-12);
  --color-secondary:             var(--orbit-blue);
  --color-secondary-foreground:  var(--gray-12);
  --color-badge:                 var(--launch-yellow);
  --color-badge-foreground:      var(--gray-12);

  /* ─── Legacy gradient (splash, gradient-text) ──────────────────── */
  --gradient-hero: linear-gradient(90deg, #ff2877, #4755ff);

  /* ─── Typography families ──────────────────────────────────────── */
  --font-sans:     'Inter', system-ui, sans-serif;        /* default body (global.css sets Inter as default) */
  --font-body:     'Work Sans', 'Inter', sans-serif;       /* buttons, work-sans-font utility */
  --font-display:  'Unbounded', 'Work Sans', sans-serif;   /* occasional display accents */
  --font-mono:     'Space Mono', ui-monospace, monospace;

  /* ─── Type scale (mirrors Tailwind text-* sizes) ───────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* ─── Radii (from button/sidebar/hero usage) ───────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;    /* buttons: rounded-lg */
  --radius-lg:   12px;   /* cards: rounded-xl */
  --radius-xl:   16px;   /* sidebar, large cards: rounded-2xl */
  --radius-pill: 48px;   /* iOS tab bar, pill CTAs */
  --radius-full: 9999px;

  /* ─── Spacing (4px grid) ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Elevation / Shadows ──────────────────────────────────────── */
  --shadow-card: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-floating: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow-primary:   0 0 15px rgba(252,252,251,0.3);
  --shadow-glow-secondary: 0 0 15px rgba(23,205,255,0.5);
  --shadow-glow-badge:     0 0 15px rgba(255,210,63,0.5);
  --shadow-glow-destructive: 0 0 15px rgba(255,90,90,0.5);

  /* ─── Glass effect (sidebars, tab bar, modals) ─────────────────── */
  --glass-bg:            rgba(13, 15, 18, 0.85);
  --glass-border:        rgba(255, 255, 255, 0.05);
  --glass-backdrop:      blur(16px);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;   /* button transition-shadow 200ms */
  --dur-slow: 300ms;   /* sidebar transition duration-300 */
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * SEMANTIC TYPE STYLES
 * ═══════════════════════════════════════════════════════════════════════════════ */

.run-h1, h1.run {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
}
.run-h2, h2.run {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-foreground);
}
.run-h3, h3.run {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-foreground);
}
.run-h4, h4.run {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-foreground);
}
.run-section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--color-foreground);
}
.run-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-foreground);
}
.run-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-foreground-secondary);
}
.run-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--color-foreground-tertiary);
}
.run-button-label {
  font-family: var(--font-body); /* Work Sans: note `work-sans-font` utility */
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0;
}
.run-code, code.run {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* "Gradient text": used on splash headlines */
.run-gradient-text {
  background: var(--gradient-hero);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: runGradient 4s ease infinite;
}
@keyframes runGradient {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Blinking cursor: always paired with the brand logo */
.run-cursor {
  color: var(--color-secondary);
  animation: runBlink 1s steps(2) infinite;
}
@keyframes runBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}