/* Design tokens — todas as cores/escalas/sombras viram custom properties.
   Cores extraídas do logo do Portal de Cursos Rápidos (azul + laranja + amarelo). */

:root {
    /* Marca */
    --color-primary:        #1e4d8a;
    --color-primary-dark:   #163d6e;
    --color-primary-soft:   #e7eef8;
    --color-secondary:      #f47920;
    --color-secondary-dark: #d56712;
    --color-secondary-soft: #fff1e3;
    --color-accent:         #f9b233;
    --color-accent-soft:    #fff6e0;

    /* Estado */
    --color-success:        #2bb673;
    --color-success-soft:   #e7f8ef;
    --color-warning:        #f5b528;
    --color-warning-soft:   #fff5db;
    --color-danger:         #e84545;
    --color-danger-soft:    #ffe6e6;

    /* Neutros */
    --color-bg:             #ffffff;
    --color-bg-alt:         #f7f9fc;
    --color-bg-muted:       #eef1f6;
    --color-border:         #e3e7ee;
    --color-border-strong:  #cdd3dd;
    --color-text:           #1a2335;
    --color-text-muted:     #5a6478;
    --color-text-soft:      #8a93a4;
    --color-dark:           #111827;
    --color-dark-alt:       #1f2937;
    --color-on-dark:        #f3f5fa;

    /* Tipografia
       System font stack — instantâneo, zero requests, ótima legibilidade.
       Self-host de Inter/Manrope vira upgrade futuro sem mudança de markup. */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font-sans);

    /* Escala fluida com clamp — funciona de 320px a 1920px sem media query */
    --text-xs:   clamp(0.75rem, 0.71rem + 0.18vw, 0.85rem);
    --text-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 0.95rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem);
    --text-3xl:  clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);
    --text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --text-5xl:  clamp(2.75rem, 2rem + 3.75vw, 3.75rem);

    --line-tight:  1.15;
    --line-snug:   1.3;
    --line-normal: 1.55;
    --line-loose:  1.75;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extra:    800;

    /* Espaçamento — escala 0.25rem */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Raios */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-focus: 0 0 0 3px rgba(30, 77, 138, 0.25);

    /* Containers (referência — uso real em layout.css) */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1320px;

    /* Transições */
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky:   1100;
    --z-fixed:    1200;
    --z-modal:    1300;
    --z-toast:    1400;
}