/* ═══════════════════════════════════════════════════════════════
   PRIMEIRA PLATEIA — Design Tokens
   primeiraplateia.pt
   Playfair Display (display/headings) + Inter (body/UI)
   Modo claro (default) · Modo escuro via [data-theme="dark"]
   Rácios WCAG AA verificados sobre superfícies respectivas
═══════════════════════════════════════════════════════════════ */

:root {

  /* ── FONTES ─────────────────────────────────────────────── */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', system-ui, sans-serif;

  /* ── ESCALA TIPOGRÁFICA (base 16px) ─────────────────────── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* ── COR PRIMÁRIA — Azul-meia-noite ────────────────────── */
  --color-primary:         #1B2B4B;
  --color-primary-dark:    #0F1E35;
  --color-primary-light:   #E8EDF5;
  --color-primary-mid:     #2D4070;  /* hover states intermédios */

  /* ── COR ACENTO — Vermelho vivo ─────────────────────────── */
  /* Contraste sobre #F8F9FA: 5.8:1 ✓ WCAG AA
     Contraste sobre #FFFFFF:  5.9:1 ✓ WCAG AA  */
  --color-accent:          #D91F1F;
  --color-accent-dark:     #B01818;
  --color-accent-light:    #FDECEA;

  /* ── SUPERFÍCIES — modo claro ───────────────────────────── */
  --surface-bg:            #F8F9FA;
  --surface-bg-2:          #EEF0F3;
  --surface-card:          #FFFFFF;
  --surface-card-border:   rgba(0, 0, 0, 0.07);
  --surface-divider:       rgba(27, 43, 75, 0.1);

  /* ── TEXTO — modo claro ─────────────────────────────────── */
  /* Rácios sobre --surface-bg (#F8F9FA):
     --text-primary   #0D1117 → 18.6:1 ✓
     --text-secondary #2D3748 → 10.2:1 ✓
     --text-muted     #4A5568 →  5.9:1 ✓ */
  --text-primary:   #0D1117;
  --text-secondary: #2D3748;
  --text-muted:     #4A5568;
  --text-inverse:   #F8F9FA;

  /* ── ESPAÇAMENTO (escala 4px) ───────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── RAIOS ──────────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(13, 17, 23, 0.06);
  --shadow-sm: 0 1px 4px rgba(13, 17, 23, 0.08);
  --shadow-md: 0 4px 16px rgba(13, 17, 23, 0.10);
  --shadow-lg: 0 8px 32px rgba(13, 17, 23, 0.12);
  --shadow-xl: 0 20px 60px rgba(13, 17, 23, 0.15);

  /* Sombra com cor primária (para cards em hover) */
  --shadow-primary: 0 8px 32px rgba(27, 43, 75, 0.18);
  --shadow-accent:  0 4px 20px rgba(217, 31, 31, 0.25);

  /* ── TRANSIÇÕES ─────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   220ms ease;
  --transition-slow:   380ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-nav:    200;
  --z-modal:  300;
  --z-toast:  400;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --nav-h:        60px;
  --max-w:      1280px;
  --max-w-text:  720px;  /* para artigos/texto corrido */
  --max-w-tight: 960px;

  /* ── GRADIENTES ─────────────────────────────────────────── */
  --gradient-hero:    linear-gradient(135deg, #0F1E35 0%, #1B2B4B 50%, #2D4070 100%);
  --gradient-accent:  linear-gradient(135deg, #D91F1F 0%, #B01818 100%);
  --gradient-surface: linear-gradient(180deg, var(--surface-bg) 0%, var(--surface-bg-2) 100%);

  /* Gradiente de fade para texto cortado */
  --gradient-fade-r: linear-gradient(to right, transparent, var(--surface-bg));
  --gradient-fade-b: linear-gradient(to bottom, transparent, var(--surface-bg));

  /* ── FOCUS ──────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(217, 31, 31, 0.35);
  --focus-ring-offset: 0 0 0 2px var(--surface-bg), 0 0 0 4px var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════
   MODO ESCURO
   Rácios calculados sobre --surface-bg dark (#0C0F14):
   --text-primary   #F0F4FA → 17.8:1 ✓
   --text-secondary #A8B4C8 →  8.1:1 ✓
   --text-muted     #6B7A94 →  4.6:1 ✓
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* Superfícies */
  --surface-bg:          #0C0F14;
  --surface-bg-2:        #141820;
  --surface-card:        #1A1F2C;
  --surface-card-border: rgba(255, 255, 255, 0.07);
  --surface-divider:     rgba(255, 255, 255, 0.08);

  /* Texto */
  --text-primary:   #F0F4FA;
  --text-secondary: #A8B4C8;
  --text-muted:     #6B7A94;
  --text-inverse:   #0C0F14;

  /* Primária — mais luminosa em fundo escuro */
  --color-primary:       #4A6FA5;
  --color-primary-dark:  #3A5A8C;
  --color-primary-light: rgba(74, 111, 165, 0.15);
  --color-primary-mid:   #5A80B8;

  /* Acento — mantém-se, com fundo mais escuro passa com mais folga */
  --color-accent-light:  rgba(217, 31, 31, 0.15);

  /* Sombras — mais subtis em fundo escuro */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Gradientes adaptados */
  --gradient-hero:    linear-gradient(135deg, #060810 0%, #0C0F14 50%, #141820 100%);
  --gradient-surface: linear-gradient(180deg, var(--surface-bg) 0%, var(--surface-bg-2) 100%);
  --gradient-fade-r:  linear-gradient(to right, transparent, var(--surface-bg));
  --gradient-fade-b:  linear-gradient(to bottom, transparent, var(--surface-bg));

  /* Focus */
  --focus-ring-offset: 0 0 0 2px var(--surface-bg), 0 0 0 4px var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — respeito por preferências do utilizador
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:   0ms;
    --transition-base:   0ms;
    --transition-slow:   0ms;
    --transition-spring: 0ms;
  }
}