/* ============================================================
   themes.css · 4 design systems via CSS variables
   Padrão: cin (CIn-UFPE)
   ============================================================ */

/* ---------- Theme 1: CIn-UFPE (padrão) ---------- */

:root,
[data-theme="cin"] {
  --primary: #DB1E2F;
  --primary-dark: #AF0421;
  --on-primary: #FFFFFF;

  --secondary: #231F20;
  --on-secondary: #FFFFFF;

  --neutral: #E0E1E0;
  --on-neutral: #231F20;

  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --on-surface: #231F20;
  --on-surface-variant: #4A4A4A;

  --outline: #E0E1E0;
  --outline-focus: #DB1E2F;

  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --shadow-card: 0 1px 3px rgba(35, 31, 32, 0.06);
  --shadow-elevated: 0 4px 12px rgba(35, 31, 32, 0.08);
  --shadow-hover: 0 8px 24px rgba(35, 31, 32, 0.12);
}

/* ---------- Theme 2: Anthropic Editorial ---------- */

[data-theme="anthropic"] {
  --primary: #C8521F;
  --primary-dark: #8B3A1A;
  --on-primary: #FAF7F0;

  --secondary: #2D1F0E;
  --on-secondary: #FAF7F0;

  --neutral: #E8DDC4;
  --on-neutral: #2D1F0E;

  --surface: #FAF7F0;
  --surface-elevated: #FFFCF5;
  --on-surface: #2D1F0E;
  --on-surface-variant: #6B5740;

  --outline: #D5C9AC;
  --outline-focus: #C8521F;

  --font-display: 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(45, 31, 14, 0.06);
  --shadow-elevated: 0 6px 16px rgba(45, 31, 14, 0.10);
  --shadow-hover: 0 12px 32px rgba(45, 31, 14, 0.15);
}

/* ---------- Theme 3: Linear Dark ---------- */

[data-theme="linear"] {
  --primary: #5E6AD2;
  --primary-dark: #4451B7;
  --on-primary: #FFFFFF;

  --secondary: #FFFFFF;
  --on-secondary: #08090A;

  --neutral: #1C1D1F;
  --on-neutral: #E8E8E9;

  --surface: #08090A;
  --surface-elevated: #131418;
  --on-surface: #F7F8F8;
  --on-surface-variant: #8A8F98;

  --outline: #1E1F22;
  --outline-focus: #5E6AD2;

  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(94, 106, 210, 0.3);
}

/* ---------- Theme 4: Vercel Geist ---------- */

[data-theme="vercel"] {
  --primary: #0070F3;
  --primary-dark: #0050C7;
  --on-primary: #FFFFFF;

  --secondary: #000000;
  --on-secondary: #FFFFFF;

  --neutral: #EAEAEA;
  --on-neutral: #000000;

  --surface: #FFFFFF;
  --surface-elevated: #FAFAFA;
  --on-surface: #000000;
  --on-surface-variant: #666666;

  --outline: #EAEAEA;
  --outline-focus: #0070F3;

  --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', monospace;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ---------- Theme-aware transitions on theme change ---------- */

html {
  transition: background-color 200ms ease;
}

body,
.site-header,
.site-footer,
.card,
.btn,
.theme-switcher select {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}