/* ============================================================================
   Ideia Digital — Design tokens
   ----------------------------------------------------------------------------
   Fonte única de verdade para cor, tipografia, espaçamento, raio e sombra.
   Extraído do :root que vivia inline em resources/views/layouts/auth.blade.php,
   que era, na prática, o único sistema visual coerente do projeto.

   CSS puro de propósito: o pipeline do laravel-mix não é executado desde
   dez/2024 (public/css/app.css está congelado), então tokens em SCSS não
   chegariam ao navegador. Aqui chegam sem build.

   Uso:  <link rel="stylesheet" href="{{ asset('css/tokens.css') }}">
   ========================================================================== */

:root {
    /* --- Marca ------------------------------------------------------------ */
    --laranja:            #FF6500;
    --laranja-light:      #FFB800;
    --laranja-dark:       #E55A00;
    --laranja-gradiente:  linear-gradient(90deg, #FF6500, #FFB800);

    /* --- Superfícies (tema escuro) ---------------------------------------- */
    --bg:                 #080602;
    --bg-card:            #100A02;
    --bg-card2:           #120C03;
    --bg-scrollbar:       #0D0905;

    /* --- Bordas ----------------------------------------------------------- */
    --border-subtle:      rgba(255, 255, 255, 0.10);
    --border-laranja:     rgba(255, 101, 0, 0.30);

    /* --- Texto ------------------------------------------------------------ */
    --text-strong:        #FFFFFF;
    --text-medium:        #C9C7C6;
    --text-muted:         #BBBBBB;
    --text-faint:         rgba(255, 255, 255, 0.65);
    --text-placeholder:   rgba(255, 255, 255, 0.30);
    --text-on-laranja:    #0A0603;
    --text-link:          #FF8040;

    /* --- Feedback --------------------------------------------------------- */
    --erro:               #EF4444;
    --erro-texto:         #FF9B9B;
    --erro-bg:            rgba(239, 68, 68, 0.10);
    --erro-borda:         rgba(239, 68, 68, 0.35);

    --sucesso:            #2ECC71;
    --sucesso-texto:      #6FE3B7;
    --sucesso-bg:         rgba(16, 217, 138, 0.10);
    --sucesso-borda:      rgba(16, 217, 138, 0.35);

    --aviso:              #FFB800;
    --aviso-texto:        #FFB27A;
    --aviso-bg:           rgba(255, 101, 0, 0.10);
    --aviso-borda:        rgba(255, 101, 0, 0.35);

    /* --- Tipografia ------------------------------------------------------- */
    --font-main:          'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Escala consolidada. Antes existiam 12,5 / 13 / 13,33 / 13,5 / 14,5 / 15px
       convivendo — seis tamanhos para três papéis. Colapsados em passos reais. */
    --fs-xs:              12px;   /* rótulo, hint, legenda           */
    --fs-sm:              13px;   /* texto de apoio, checkbox        */
    --fs-base:            14px;   /* corpo, input, botão             */
    --fs-md:              15px;   /* ícone de campo                  */
    --fs-lg:              16px;   /* corpo ampliado                  */
    --fs-xl:              21px;   /* logo                            */
    --fs-2xl:             22px;   /* título de cartão                */

    --fw-light:           300;
    --fw-regular:         400;
    --fw-semibold:        600;
    --fw-bold:            700;

    --lh-tight:           1.2;
    --lh-base:            1.5;
    --lh-loose:           1.6;

    --tracking-tight:     -0.5px;
    --tracking-wide:      0.04em;

    /* --- Espaçamento (passo de 4px) --------------------------------------- */
    --space-1:            4px;
    --space-2:            8px;
    --space-3:            12px;
    --space-4:            16px;
    --space-5:            20px;
    --space-6:            26px;
    --space-7:            32px;
    --space-8:            36px;

    /* --- Raio ------------------------------------------------------------- */
    --radius-sm:          8px;
    --radius-md:          10px;
    --radius-lg:          14px;
    --radius-xl:          18px;
    --radius-full:        999px;

    /* --- Sombra ----------------------------------------------------------- */
    --shadow-card:        0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 101, 0, 0.04);
    --shadow-botao:       0 10px 24px rgba(255, 101, 0, 0.25);
    --shadow-botao-hover: 0 12px 28px rgba(255, 101, 0, 0.35);
    --shadow-brilho:      0 0 10px rgba(255, 101, 0, 0.90);

    /* --- Foco (WCAG 2.4.7) ------------------------------------------------ */
    --focus-ring:         0 0 0 3px rgba(255, 101, 0, 0.35);

    /* --- Movimento -------------------------------------------------------- */
    --transicao-rapida:   .15s ease;
    --transicao-base:     .2s ease;
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transicao-rapida: 0s;
        --transicao-base:   0s;
    }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}