/* ==========================================================================
   Design tokens — UNISUAM 2026
   Extraídos das variáveis do Figma (Site UNISUAM - 2026).
   Não usar valores hex soltos fora deste arquivo.
   ========================================================================== */

:root {
  /* ---------- Brand ---------- */
  --us-blue: #004070;             /* Brand Blue US */
  --us-blue-light: #076b8f;       /* Light Brand Blue US */
  --us-orange: #ef7d00;           /* Brand Orange US */
  --us-orange-light: #f09906;     /* Light Brand Orange US */
  --us-orange-dark: #f06800;      /* Dark Brand Orange US */

  /* ---------- Paleta expandida ---------- */
  --us-sky: #0f96ae;
  --us-sky-light: #6fc0ce;
  --us-green: #07ad6a;
  --us-green-dark: #045735;      /* amostrado do frame 2714-705 */
  --us-green-light: #6acea6;
  --us-green-lighter: #9cdec3;
  --us-purple: #7d378d;
  --us-purple-light: #b187bb;
  --us-purple-dark: #5e296a;
  --us-pink: #e5457a;
  --us-yellow: #f0b40c;
  --us-yellow-light: #f6d26d;
  --us-yellow-lighter: #f9e19e;
  --us-coral: #f05200;

  /* ---------- Grayscale ---------- */
  --gray-900: #20242d;            /* Dark Gray 3 US */
  --gray-800: #2f3542;            /* Dark Gray 2 US */
  --gray-600: #57606f;            /* Dark Gray 1 US */
  --gray-500: #747d8c;            /* Gray US */
  --gray-400: #a4b0be;            /* Light Gray 1 US */
  --gray-300: #ced6e0;            /* Light Gray 2 US */
  --gray-200: #dfe4ea;            /* Light Gray 3 US */
  --gray-100: #f1f2f6;            /* Light Gray 4 US */
  --white: #ffffff;
  --black: #1a1a1a;

  /* ---------- Papéis semânticos ---------- */
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  /* gray-500 dá só 4.15:1 no branco; gray-600 dá 6.35:1 (WCAG AA). */
  --color-text-subtle: var(--gray-600);
  --color-text-inverse: var(--white);
  --color-heading: var(--gray-800);
  --color-link: var(--us-orange);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --surface-page: var(--white);
  --surface-alt: var(--gray-100);
  --surface-dark: var(--gray-800);
  --surface-darker: var(--gray-900);
  --focus-ring: var(--us-blue-light);

  /* Cores por modalidade de curso — usadas por [data-modalidade] */
  --mod-presencial: var(--us-orange);
  --mod-digital: var(--us-purple);
  --mod-semipresencial: var(--us-green);

  /**
   * Faixas com gradiente. Amostradas do frame (não são variáveis do Figma):
   * todas correm na diagonal, do canto inferior-esquerdo (escuro) ao
   * superior-direito (claro) — exceto a do Pólen, que é vertical.
   */
  --band-dark: linear-gradient(to top right, var(--gray-900), var(--gray-800));
  --band-blue: linear-gradient(to top right, var(--us-blue), #0074d1);
  --band-green: linear-gradient(to top right, var(--us-sky), var(--us-green));
  --band-orange: linear-gradient(180deg, #ed834b, #ee6768);
  /* Faixa ESG de Responsabilidade Social — amostrada do frame 3104-264, que
     clareia de baixo para cima e um tico da esquerda para a direita. */
  --band-mint: linear-gradient(to top left, var(--us-green-lighter), #cbeee0);

  /* ---------- Tipografia ---------- */
  --font-sans: "Ubuntu", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-h1: 3rem;         /* 48px — H1 Desktop */
  --fs-h2: 2rem;         /* 32px — H2 Desktop */
  --fs-h3: 1.5rem;       /* 24px — H3 Desktop */
  --fs-h4: 1.25rem;      /* 20px */
  --fs-body: 1.125rem;   /* 18px — Body Desktop */
  --fs-md: 1rem;         /* 16px — Text Medium */
  --fs-sm: 0.875rem;     /* 14px — Small Desktop */
  --fs-xs: 0.75rem;      /* 12px */

  --lh-tight: 1.05;      /* títulos (Figma: lineHeight 100%) */
  --lh-snug: 1.35;
  --lh-body: 1.778;      /* 32/18 — Body Desktop */
  --lh-md: 1.5;          /* 24/16 — Text Medium */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Espaçamento (escala de 4px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---------- Layout ---------- */
  --container-max: 1140px;
  --container-gutter: 1rem;       /* 16px — margem lateral dos frames mobile */
  --section-py: 3.5rem;           /* mobile */
  --header-h: 80px;               /* igual nos dois frames — cabe o botão de 48px */

  /* ---------- Formas ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(32, 36, 45, 0.08);
  --shadow-md: 0 2px 10px rgba(32, 36, 45, 0.08);
  --shadow-lg: 0 8px 28px rgba(32, 36, 45, 0.12);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  --z-header: 100;
  --z-drawer: 200;
}

@media (min-width: 64rem) {
  :root {
    --container-gutter: 1.5rem;
    --section-py: 6.25rem;        /* 100px — desktop */
    --header-h: 80px;
  }
}

/* Respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}