/* ═══════════════════════════════════════════════════════════
   tokens.css — Design tokens: temas claro e escuro
═══════════════════════════════════════════════════════════ */

/* ── TEMA ESCURO (padrão) ── */
[data-theme="dark"] {
  --bg-page:    #0d0f14;
  --bg-surface: #151820;
  --bg-raised:  #1c2030;
  --bg-overlay: #242840;
  --bg-input:   #1c2030;

  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.20);

  --text-primary:   #e8eaf0;
  --text-secondary: #9aa0b8;
  --text-muted:     #5a6080;
  --text-inverse:   #0d0f14;

  --accent:      #7c9fff;
  --accent-dark: #4f6fd8;
  --accent-bg:   rgba(124,159,255,0.12);

  --green:    #56d08a;
  --green-bg: rgba(86,208,138,0.10);
  --green-bd: rgba(86,208,138,0.25);

  --red:    #f06070;
  --red-bg: rgba(240,96,112,0.10);
  --red-bd: rgba(240,96,112,0.25);

  --yellow:    #f0c060;
  --yellow-bg: rgba(240,192,96,0.10);
  --yellow-bd: rgba(240,192,96,0.25);

  --teal:    #50d0c0;
  --teal-bg: rgba(80,208,192,0.10);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);

  --header-blur: blur(12px);
  --header-bg:   rgba(21,24,32,0.92);
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --bg-page:    #f5f4f0;
  --bg-surface: #ffffff;
  --bg-raised:  #f0eeea;
  --bg-overlay: #e8e6e0;
  --bg-input:   #f8f7f4;

  --border-subtle:  rgba(0,0,0,0.07);
  --border-default: rgba(0,0,0,0.12);
  --border-strong:  rgba(0,0,0,0.22);

  --text-primary:   #1a1c24;
  --text-secondary: #52566a;
  --text-muted:     #9096b0;
  --text-inverse:   #f5f4f0;

  --accent:      #2d5fd4;
  --accent-dark: #1a40a8;
  --accent-bg:   rgba(45,95,212,0.08);

  --green:    #1a7a42;
  --green-bg: rgba(26,122,66,0.08);
  --green-bd: rgba(26,122,66,0.22);

  --red:    #c0313f;
  --red-bg: rgba(192,49,63,0.08);
  --red-bd: rgba(192,49,63,0.22);

  --yellow:    #9a6600;
  --yellow-bg: rgba(154,102,0,0.08);
  --yellow-bd: rgba(154,102,0,0.22);

  --teal:    #0d7a72;
  --teal-bg: rgba(13,122,114,0.08);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  --header-blur: blur(12px);
  --header-bg:   rgba(255,255,255,0.92);
}

/* ── CONSTANTES (não mudam com o tema) ── */
:root {
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-mono:  'DM Mono', 'Fira Mono', monospace;
  --font-serif: 'DM Serif Display', Georgia, serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --header-h: 56px;
  --sidebar-w: 280px;

  --transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}