/* ============================================================
   innphone v2 — Tech / Futuristic Design Tokens
   Dark mode is the default. Light mode via [data-theme="light"].
   ============================================================ */

:root,
[data-theme="dark"] {
  /* Base — cool, near-black with a hint of indigo */
  --bg:        oklch(0.13 0.012 255);
  --bg-elev:   oklch(0.17 0.014 255);
  --bg-soft:   oklch(0.20 0.014 255);
  --line:      oklch(0.30 0.014 255 / 0.45);
  --line-soft: oklch(0.30 0.014 255 / 0.22);
  --grid:      oklch(0.50 0.010 255 / 0.07);

  --fg:        oklch(0.97 0.005 255);
  --fg-2:      oklch(0.78 0.012 255);
  --fg-3:      oklch(0.58 0.014 255);
  --fg-4:      oklch(0.42 0.014 255);

  /* Brand accents — innphone blue palette */
  /* Primary highlight #053ae7 — deep electric blue */
  /* Secondary highlight #6c8eff — soft periwinkle */
  --acc-cyan:    #6c8eff;             /* lighter accent, used for glows + hover */
  --acc-cyan-2:  #053ae7;             /* primary brand blue */
  --acc-magenta: #6c8eff;             /* keep gradients in family */
  --acc-amber:   oklch(0.84 0.15 90);

  /* Glows derived from accents */
  --glow-cyan:    oklch(0.72 0.18 265 / 0.45);
  --glow-cyan-2:  oklch(0.72 0.18 265 / 0.20);
  --glow-magenta: oklch(0.55 0.25 265 / 0.45);
  --glow-magenta-2: oklch(0.55 0.25 265 / 0.18);

  --primary:   var(--acc-cyan-2);
  --primary-2: var(--acc-cyan);

  /* Card / pill backgrounds */
  --chip-bg:   oklch(0.22 0.014 255 / 0.7);
  --card-bg:   oklch(0.17 0.014 255 / 0.7);
  --card-bg-2: oklch(0.20 0.014 255 / 0.5);

  /* Selection */
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:        oklch(0.98 0.005 255);
  --bg-elev:   oklch(0.96 0.005 255);
  --bg-soft:   oklch(0.93 0.005 255);
  --line:      oklch(0.40 0.014 255 / 0.30);
  --line-soft: oklch(0.40 0.014 255 / 0.14);
  --grid:      oklch(0.40 0.014 255 / 0.07);

  --fg:        oklch(0.18 0.012 255);
  --fg-2:      oklch(0.36 0.014 255);
  --fg-3:      oklch(0.50 0.014 255);
  --fg-4:      oklch(0.66 0.014 255);

  /* Light mode uses the deeper primary as accent for contrast */
  --acc-cyan:    #053ae7;
  --acc-cyan-2:  #6c8eff;
  --acc-magenta: #053ae7;
  --acc-amber:   oklch(0.65 0.15 70);

  --glow-cyan:    oklch(0.55 0.25 265 / 0.30);
  --glow-cyan-2:  oklch(0.55 0.25 265 / 0.10);
  --glow-magenta: oklch(0.72 0.18 265 / 0.25);
  --glow-magenta-2: oklch(0.72 0.18 265 / 0.08);

  --primary:   var(--acc-cyan);
  --primary-2: var(--acc-cyan-2);

  --chip-bg:   oklch(0.96 0.005 255 / 0.8);
  --card-bg:   oklch(1 0 0 / 0.6);
  --card-bg-2: oklch(0.93 0.005 255 / 0.6);

  color-scheme: light;
}

:root {
  /* Type */
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Sizing */
  --shell:    1440px;
  --gutter:   clamp(20px, 4vw, 48px);
  --radius:   14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}