/* ==========================================================================
   DESIGN TOKENS - COLÉGIO OLIVEIRA LIMA
   Sistema de Design central: paleta, tipografia, espaçamentos, raios, sombras
   ========================================================================== */

:root {
  /* ---- Paleta inspirada nas cores do logotipo do colégio ----
     Azul-ciano #0994B4 | dourado #E4CD91 | verde #44A383 | vermelho #A6555A
     Variantes escuras garantem contraste AA (>= 4,5:1) sobre fundos claros */
  --color-primary: #0B7C96;           /* Azul-ciano do logo (escurecido) - títulos e botões */
  --color-primary-dark: #06566B;      /* Azul-petróleo escuro - rodapé, hero, seções escuras */
  --color-primary-soft: #E2F2F5;      /* Fundo azul suave para destaques */
  --color-primary-variant: #08708A;   /* Azul para links e ícones ativos */
  --color-secondary: #44A383;         /* Verde esmeralda do logo - sucesso/pilares */
  --color-secondary-soft: #E6F3EE;    /* Fundo verde suave */
  --color-accent: #E4CD91;            /* Dourado do logo - badges e CTA */
  --color-accent-dark: #8A6D1F;       /* Dourado escurecido para textos pequenos (AA) */
  --color-accent-soft: #F8F3E6;       /* Fundo dourado suave */
  --color-tertiary: #A6555A;          /* Vermelho/terracota do logo - destaque/danger */
  --color-tertiary-soft: #F7EEEF;     /* Fundo vermelho suave */
  --color-bg: #F8F7F7;                /* Branco Gelo - fundo geral */
  --color-surface: #FFFFFF;           /* Branco Puro - cards e modais */
  --color-text: #1E293B;              /* Grafite - texto principal */
  --color-text-soft: #64748B;         /* Cinza Neutro - metadados/legendas */
  --color-border: #E2E8F0;            /* Cinza Linho - divisores */
  --color-success: #44A383;           /* Verde de confirmação */
  --color-danger: #A6555A;            /* Vermelho de erros */

  /* ---- Tipografia ---- */
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem;      /* 12px - label/meta */
  --fs-sm: 0.875rem;     /* 14px - corpo secundário */
  --fs-base: 1rem;       /* 16px - corpo principal */
  --fs-md: 1.125rem;     /* 18px - corpo ampliado */
  --fs-lg: 1.25rem;      /* 20px - subtítulos */
  --fs-xl: 1.5rem;       /* 24px - títulos de seção */
  --fs-2xl: 1.875rem;    /* 30px - títulos de página */
  --fs-3xl: 2.25rem;     /* 36px - hero mobile */
  --fs-4xl: 3rem;        /* 48px - hero desktop */
  --lh-tight: 1.25;
  --lh-body: 1.65;
  --lh-relaxed: 1.75;

  /* ---- Espaçamentos (escala 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --container-max: 1200px;
  --container-pad: 1.25rem;

  /* ---- Raios de Borda ---- */
  --radius-sm: 6px;
  --radius-md: 8px;       /* botões e tags */
  --radius-lg: 16px;      /* cards e caixas */
  --radius-xl: 20px;      /* imagens de destaque */
  --radius-full: 9999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 24px -4px rgba(27, 54, 93, 0.12);
  --shadow-hero: 0 20px 40px -12px rgba(27, 54, 93, 0.35);

  /* ---- Transições ---- */
  --transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;

  /* ---- Layout ---- */
  --header-height: 0px; /* calculado em runtime, reservado pelo sticky */
  color-scheme: light;
}