/* Generated from design/tokens/core.json. Mobile can later consume the same values from JSON. */
:root {
  --brand-secondary: #10b981;
  --brand-secondary-50: #ecfdf5;
  --brand-secondary-100: #d1fae5;
  --brand-secondary-200: #a7f3d0;
  --brand-secondary-300: #6ee7b7;
  --brand-secondary-400: #34d399;
  --brand-secondary-500: #10b981;
  --brand-secondary-600: #059669;
  --brand-secondary-700: #047857;
  --brand-secondary-800: #065f46;
  --brand-secondary-900: #064e3b;

  --brand: #bd1c14;
  --brand-50: #fde9e8;
  --brand-100: #fad3d1;
  --brand-200: #f5a7a3;
  --brand-300: #f07b75;
  --brand-400: #ec4f46;
  --brand-500: #e72318;
  --brand-600: #b91c13;
  --brand-700: #8a150f;
  --brand-800: #5c0e0a;
  --braqd-900: #2e0705;
  --brand-950: #170302;
  /* Accents */

  --accent: #2f617a;

  --accent-400: #ff6ca5;
  --accent-500: #ff4d8d;
  --accent-600: #e13c7e;
  --accent-700: #c52c6c; /* neon magenta */
  --secondary-400: #22d3ee;
  --secondary-500: #06b6d4;
  --secondary-600: #0891b2; /* cyan */

  /* Map to existing variables used by components */
  --color-brand-primary: var(--brand-secondary-600);
  --color-brand-primary-contrast: #ffffff;
  --color-brand-accent: var(--brand-secondary-200);

  /* Neutrals */
  --neutral-0: #0a0b0d;
  --neutral-50: #121419;
  --neutral-100: #1a1d24;
  --neutral-200: #2a2f3a;
  --neutral-300: #3a4250;
  --neutral-400: #515c6e;
  --neutral-500: #6b778a;
  --neutral-600: #8e99ab;
  --neutral-700: #b5becc;
  --neutral-800: #d7dde7;
  --neutral-900: #edf1f7;
  --neutral-1000: #ffffff;

  /* Semantic */
  --color-success: #16a34a;
  --color-warning: #eab308;
  --color-danger: #dc2626;
  --color-info: #0ea5e9;

  /* Typography */
  --font-sans:
    "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 30px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-tight: 1.2;
  --line-normal: 1.5;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.16);

  /* Help native UI follow theme (scrollbars, form controls, etc.) */
  color-scheme: light dark;

  /* Optional globals for glow/gradients */
  --gradient-brand: linear-gradient(90deg, var(--brand-secondary-700), var(--brand-secondary-500));
  --ring-color: color-mix(in oklab, var(--brand-secondary-500), transparent 80%);

  /* Surfaces & text (light) */
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --text-primary: #0b0d12;
  --text-secondary: #3a4250;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);

  /* Chips (Light) */
  --chip-bg: var(--brand-secondary-50);
  --chip-fg: var(--brand-secondary-800);
  --chip-border: var(--brand-secondary-200);
  --chip-bg-hover: var(--brand-secondary-100);
  --chip-border-hover: var(--brand-secondary-300);
}

/* Dark theme */
[data-theme="dark"] {
  --color-brand-primary: var(
    --brand-secondary-500
  ); /* a touch brighter in dark for better pop */
  --color-brand-accent: var(--brand-secondary-400);
  --ring-color: color-mix(in oklab, var(--brand-secondary-400), transparent 70%);

  /* Deep navy-slate surfaces for the cyberpunk vibe */
  --bg-surface: #020617; /* page */
  --bg-elevated: #0f172a; /* cards/headers */
  --text-primary: #f8fafc; /* slate-50 */
  --text-secondary: #94a3b8; /* slate-400 */
  --border-subtle: rgba(16, 185, 129, 0.15); /* emerald-500 at 15% */
  --border-strong: rgba(6, 182, 212, 0.25); /* cyan-500 at 25% */

  /* Chips (Dark) */
  --chip-bg: rgba(16, 185, 129, 0.1);
  --chip-fg: var(--brand-secondary-300);
  --chip-border: rgba(16, 185, 129, 0.25);
  --chip-bg-hover: rgba(16, 185, 129, 0.2);
  --chip-border-hover: var(--brand-secondary-400);
}