/* ============================================================
   tokens.css — Design Tokens  |  Europydas
   Miami Vice: deep navy + electric teal + coral + violet
   ============================================================ */

/* ── DARK THEME ─────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  /* Backgrounds */
  --bg:            #07090f;
  --bg-alt:        #0b0d15;
  --bg-card:       #0e1120;
  --surface:       rgba(255,255,255,0.042);
  --surface-hover: rgba(255,255,255,0.07);
  --surface-solid: #111828;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-focus:  rgba(0,245,212,0.5);

  /* Miami Vice brand palette */
  --primary:       #00f5d4;   /* electric teal    */
  --primary-dim:   rgba(0,245,212,0.12);
  --secondary:     #ff6b8a;   /* coral pink       */
  --secondary-dim: rgba(255,107,138,0.12);
  --accent:        #b8b0ff;   /* soft violet      */
  --accent-dim:    rgba(184,176,255,0.12);
  --cyan:          #00e5ff;   /* electric cyan    */
  --gold:          #ffba08;   /* amber            */
  --warn:          #ffba08;
  --danger:        #ff6b8a;
  --danger-dim:    rgba(255,107,138,0.12);
  --purple:        #df80ff;

  /* Text */
  --text:          #edf0f7;
  --text-dim:      #8a9ab8;
  --muted:         #4a5878;

  /* Nav */
  --nav-bg:        rgba(7,9,15,0.95);
  --nav-h:         62px;

  /* Cards */
  --card-shadow:   0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --card-glow-primary: 0 0 0 1px rgba(0,245,212,0.12), 0 8px 32px rgba(0,245,212,0.06);
  --card-glow-accent:  0 0 0 1px rgba(184,176,255,0.12), 0 8px 32px rgba(184,176,255,0.06);

  /* Shape */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;

  /* Panel */
  --panel-w:      320px;
  --panel-bg:     #070a0f;
  --panel-border: rgba(0,245,212,0.12);

  /* Background atmosphere */
  --bg-grad-a: rgba(0,245,212,0.05);
  --bg-grad-b: rgba(255,107,138,0.04);
  --bg-grad-c: rgba(184,176,255,0.03);
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            #f5fffe;
  --bg-alt:        #eefffe;
  --bg-card:       #ffffff;
  --surface:       #ffffff;
  --surface-hover: #f0fffe;
  --surface-solid: #ffffff;
  --border:        rgba(0,180,200,0.18);
  --border-strong: rgba(0,180,200,0.32);
  --border-focus:  rgba(0,200,184,0.55);

  --primary:       #00897b;
  --primary-dim:   rgba(0,137,123,0.1);
  --secondary:     #e0305a;
  --secondary-dim: rgba(224,48,90,0.1);
  --accent:        #5c4dcc;
  --accent-dim:    rgba(92,77,204,0.1);
  --cyan:          #0097a7;
  --gold:          #d46000;
  --warn:          #b45000;
  --danger:        #e0305a;
  --danger-dim:    rgba(224,48,90,0.1);
  --purple:        #7c3aed;

  --text:          #071520;
  --text-dim:      #1a3a55;
  --muted:         #4a6a80;

  --nav-bg:        rgba(7,12,22,0.97);
  --nav-h:         62px;

  --card-shadow:   0 2px 16px rgba(0,100,120,0.08);
  --card-glow-primary: 0 0 0 1px rgba(0,137,123,0.15), 0 8px 24px rgba(0,137,123,0.08);
  --card-glow-accent:  0 0 0 1px rgba(92,77,204,0.15), 0 8px 24px rgba(92,77,204,0.08);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;

  --panel-w:      320px;
  --panel-bg:     #f5f7f8;
  --panel-border: rgba(0,180,160,0.18);

  --bg-grad-a: rgba(0,200,184,0.06);
  --bg-grad-b: rgba(224,48,90,0.04);
  --bg-grad-c: rgba(92,77,204,0.03);
}

/* ── BRAND ─────────────────────────────────────────────────── */
:root {
  --brand-name: 'Europydas';
  --brand-hex:  #00f5d4;
  --brand-dark: #07090f;
}