/* ============================================================
   AutoScore — Design Tokens (variáveis CSS globais)
   Preserva a identidade visual original do projeto HTML.
   Breakpoints oficiais: docs/governance/official-responsive-breakpoints.md
   ============================================================ */

:root {
    /* Paleta principal */
    --color-primary: #0382e7;
    --color-primary-hover: #2393e9;
    --color-primary-light: #53aef1;
    --color-primary-dark: #0f3157;

    /* Cinzas */
    --color-gray-logo: #a7a9ac;
    --color-gray-900: #101828;
    --color-gray-800: #1d2939;
    --color-gray-700: #344054;
    --color-gray-600: #475467;
    --color-gray-500: #667085;
    --color-gray-300: #d0d5dd;
    --color-gray-200: #e4e7ec;
    --color-gray-100: #f2f4f7;
    --color-gray-50: #f9fafb;
    --color-white: #ffffff;

    /* Semânticas */
    --color-success: #12b76a;
    --color-warning: #fdb022;
    --color-error: #f04438;

    /* Gradientes */
    --gradient-primary: linear-gradient(
        135deg,
        #0f3157 0%,
        #0382e7 55%,
        #53aef1 100%
    );
    --gradient-soft: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    --gradient-dark: linear-gradient(
        135deg,
        #081f3a 0%,
        #0f3157 60%,
        #0382e7 100%
    );

    /* Sombras */
    --shadow-sm: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 12px 30px rgba(16, 24, 40, 0.1);
    --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.16);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    /* Layout */
    --site-container: 1200px;
    --site-gutter: clamp(16px, 3vw, 32px);
    --container: var(--site-container);
    --header-h: 76px;

    /* Tipografia */
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "Fira Code", "Cascadia Code", monospace;

    /* Transições */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.35s ease;

    /* Controles globais — fonte canônica: forms.css */
    --control-font-size: 0.9375rem;
    --control-line-height: 1.4;
    --control-height: 42px;
    --control-padding-block: 0.625rem;
    --control-padding-inline: 0.75rem;
    --control-radius: var(--radius-sm);
    --control-color: var(--color-gray-900);
    --control-placeholder-color: var(--color-gray-500);
    --control-background: var(--color-white);
    --control-background-hover: var(--color-gray-50);
    --control-background-disabled: var(--color-gray-100);
    --control-background-readonly: var(--color-gray-50);
    --control-border-color: var(--color-gray-300);
    --control-border-hover: var(--color-gray-500);
    --control-border-focus: var(--color-primary);
    --control-focus-ring: 0 0 0 3px rgba(3, 130, 231, 0.18);
    --control-disabled-color: var(--color-gray-500);
    --control-disabled-opacity: 0.7;
    --control-invalid-color: var(--color-error);
    --control-invalid-border: var(--color-error);
    --control-invalid-ring: 0 0 0 3px rgba(240, 68, 56, 0.16);
    --control-valid-color: var(--color-success);
    --control-valid-border: var(--color-success);
    --control-valid-ring: 0 0 0 3px rgba(18, 183, 106, 0.16);
    --control-selection-background: rgba(3, 130, 231, 0.2);
    --control-transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

/* Preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}