/* ============================================================
   Portal da Carteirinha — Design Tokens
   Identidade visual Estácio: losango facetado (verde-menta →
   turquesa → ciano → azul), turquesa de apoio e azul institucional.
   Camada 1: primitivos  ·  Camada 2: semânticos
   ============================================================ */

:root {
  /* ---------- Primitivos: turquesa Estácio (cor de assinatura) ---------- */
  --teal-900: #0c5f58;
  --teal-800: #10786f;
  --teal-700: #159187;
  --teal-600: #1aab9f;
  --teal-500: #33c6b6;   /* turquesa principal da marca */
  --teal-400: #5ed5c7;
  --teal-300: #8ee3d9;
  --teal-200: #bcefe9;
  --teal-100: #ddf7f3;
  --teal-50:  #f0fcfa;

  /* ---------- Primitivos: azul institucional ---------- */
  --blue-950: #06213f;
  --blue-900: #0a3568;
  --blue-800: #0e4485;
  --blue-700: #14539e;   /* azul do painel da carteirinha */
  --blue-600: #1c68bd;
  --blue-500: #2c81d6;
  --blue-400: #5da3e5;
  --blue-300: #96c4f0;
  --blue-200: #c4dcf7;
  --blue-100: #e0edfc;
  --blue-50:  #f0f6fe;

  /* ---------- Primitivos: gradiente do losango ---------- */
  --gem-1: #9adecb;   /* menta */
  --gem-2: #4cc3b6;   /* turquesa */
  --gem-3: #2fa6c6;   /* ciano */
  --gem-4: #2c71bc;   /* azul */

  /* ---------- Primitivos: neutros ---------- */
  --ink: #1d1d1b;      /* preto do logotipo Estácio */
  --slate-950: #060b14;
  --slate-900: #101828;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-150: #eaeff5;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white: #ffffff;

  /* ---------- Primitivos: status ---------- */
  --green-700: #0b6b45;
  --green-600: #0f7b4f;
  --green-100: #dcf5e8;
  --amber-700: #92400e;
  --amber-600: #b45309;
  --amber-100: #fdf0d5;
  --red-700: #9a2019;
  --red-600: #b42318;
  --red-100: #fde8e6;

  /* ---------- Semânticos: superfícies ---------- */
  --bg-canvas: #f2f7fb;
  --bg-surface: var(--white);
  --bg-surface-2: var(--slate-50);
  --bg-surface-3: var(--slate-100);
  --bg-inverse: var(--blue-800);
  --bg-scrim: rgba(6, 33, 63, 0.55);

  /* ---------- Semânticos: texto ---------- */
  --text-strong: var(--slate-900);
  --text-body: var(--slate-700);
  --text-muted: #5a6879;
  --text-faint: #7f8ea3;
  --text-on-brand: var(--white);
  --text-brand: var(--blue-800);

  /* ---------- Semânticos: bordas ---------- */
  --border: #dbe6f0;
  --border-strong: var(--slate-300);
  --border-brand: var(--blue-200);

  /* ---------- Semânticos: ação ---------- */
  --action: var(--blue-700);
  --action-hover: var(--blue-800);
  --action-active: var(--blue-900);
  --action-soft: var(--blue-50);
  --focus-ring: var(--blue-600);

  /* ---------- Semânticos: acento (turquesa) ---------- */
  --accent: var(--teal-500);
  --accent-strong: var(--teal-700);
  --accent-soft: var(--teal-100);
  --accent-on-dark: var(--teal-300);

  /* ---------- Tipografia ---------- */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica — 12 · 13 · 14 · 16 · 18 · 21 · 26 · 32 · 40 */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.625rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-caps: 0.08em;
  --tracking-caps-wide: 0.14em;

  /* ---------- Espaçamento (ritmo 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Raio ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 26px;
  --radius-pill: 999px;

  /* ---------- Elevação ---------- */
  --shadow-1: 0 1px 2px rgba(10, 53, 104, 0.05), 0 1px 1px rgba(10, 53, 104, 0.03);
  --shadow-2: 0 1px 2px rgba(10, 53, 104, 0.04), 0 4px 10px -2px rgba(10, 53, 104, 0.08);
  --shadow-3: 0 2px 4px rgba(10, 53, 104, 0.05), 0 12px 24px -6px rgba(10, 53, 104, 0.12);
  --shadow-4: 0 4px 8px rgba(10, 53, 104, 0.06), 0 24px 48px -12px rgba(10, 53, 104, 0.18);
  --shadow-card: 0 2px 4px rgba(6, 33, 63, 0.08), 0 18px 32px -12px rgba(6, 33, 63, 0.26),
                 0 44px 72px -32px rgba(6, 33, 63, 0.34);
  --shadow-focus: 0 0 0 3px rgba(28, 104, 189, 0.28);

  /* ---------- Movimento ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-flip: 720ms;
  --ease-out: cubic-bezier(0.22, 0.75, 0.30, 1);
  --ease-in: cubic-bezier(0.55, 0.08, 0.78, 0.30);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.44, 1);

  /* ---------- Camadas ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 100;
  --z-toast: 1000;

  /* ---------- Layout ---------- */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --bottomnav-h: 62px;
  --container: 1240px;
}

/* Preferência de movimento reduzido — global e via opção do usuário */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-flip: 1ms;
  }
}

:root[data-motion="reduced"] {
  --dur-fast: 1ms;
  --dur-base: 1ms;
  --dur-slow: 1ms;
  --dur-flip: 1ms;
}