/* ========================================
   Tokens do design system
   Fonte única de cor, espaço, raio, sombra e foco.
   Valores do documento documentos_projeto/regras_design.md (§3 e §5).
   Carregado antes do custom.css; as telas usam os tokens, nunca o valor.
   ======================================== */
:root {
    /* Marca (tema padrão; um tema de cliente troca estes valores via data-theme) */
    --brand-50: hsl(20 12% 95%);
    --brand-100: hsl(27 22% 90%);
    --brand-200: hsl(27 34% 75%);
    --brand-300: hsl(27 46% 65%);
    --brand-400: hsl(27 58% 60%);
    --brand-500: hsl(27 70% 55%);
    --brand-600: hsl(27 82% 45%);
    --brand-600-rgb: 209, 105, 21; /* o mesmo brand-600, em r,g,b: o Bootstrap monta rgba() com isto */
    --brand-700: hsl(27 70% 35%);
    --brand-800: hsl(27 58% 25%);
    --brand-900: hsl(26 45% 15%);
    --brand-950: hsl(28 33% 10%);

    /* CTA: única cor permitida em ação primária */
    --cta-light: hsl(27 70% 55%);
    --cta: hsl(27 82% 45%);
    --cta-dark: hsl(27 70% 35%);

    /* Neutros: stone (única família neutra) */
    --stone-50: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;
    --white: #ffffff;

    /* Status (fixos, nunca temáticos) */
    --green-700: #15803d;
    --yellow-300: #fde047;
    --yellow-500: #eab308;
    --yellow-800: #854d0e;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --red-900: #7f1d1d;

    /* Os mesmos tons em r,g,b: o Bootstrap monta rgba() com isto (bg-*, text-*, border-*) */
    --green-700-rgb: 21, 128, 61;
    --yellow-500-rgb: 234, 179, 8;
    --red-700-rgb: 185, 28, 28;
    --brand-700-rgb: 152, 83, 27;
    --stone-50-rgb: 250, 250, 249;
    --stone-500-rgb: 120, 113, 108;
    --stone-900-rgb: 28, 25, 23;

    /* Semânticos: usar estes primeiro */
    --surface-app: var(--stone-100);
    --surface-card: var(--stone-50);
    --surface-raised: var(--white);
    --surface-sunken: var(--stone-200);
    --border-subtle: var(--stone-200);
    --border-input: var(--stone-300);
    --text-strong: var(--stone-900);
    --text-body: var(--stone-700);
    --text-muted: var(--stone-500);
    --text-faint: var(--stone-400);
    --text-on-cta: var(--white);
    --text-on-cta-dark: var(--text-on-cta); /* texto sobre o --cta-dark (hover); um skin de CTA claro põe branco aqui */
    --text-price: var(--brand-700);
    --text-section-title: var(--brand-600);
    --focus-ring: var(--brand-500);
    --caret: var(--cta);
    --ring: var(--cta);

    /* Espaço (base de 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --gutter-sm: 1rem;
    --gutter-lg: 2rem;
    --grid-gap: 0.5rem;
    --grid-gap-lg: 1rem;

    /* Raio */
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-badge: 0.25rem;
    --radius-full: 9999px;

    /* Sombra */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(12 10 9 / 0.1), 0 2px 4px -2px rgb(12 10 9 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-upper: 0 -5px 5px rgba(0, 0, 0, 0.3);
    --shadow-center: 0 0 5px rgba(0, 0, 0, 0.3);

    /* Tamanhos */
    --control-sm: 2.25rem;
    --control-md: 2.75rem;
    --control-lg: 3rem;
    --header-h: 4rem;
    --nav-h: 3.5rem;
    --topnav-h: 4.5rem;
    --sidenav-w: 16rem;
    --sidenav-w-collapsed: 4rem;
    --product-card-min: 9.5rem;
    --product-card-min-lg: 13rem;

    /* Foco */
    --ring-width: 2px;
    --ring-offset: 2px;
}

/* Modo escuro: pares declarados, nada seta data-theme-mode (sem efeito na tela) */
[data-theme-mode="dark"] {
    --surface-app: var(--stone-900);
    --surface-card: var(--stone-800);
    --surface-raised: var(--stone-800);
    --surface-sunken: var(--stone-900);
    --border-subtle: var(--stone-700);
    --border-input: var(--stone-700);
    --text-strong: var(--stone-100);
    --text-body: var(--stone-300);
    --text-muted: var(--stone-400);
    --text-faint: var(--stone-500);
    --text-price: var(--brand-200);
    --text-section-title: var(--brand-200);
    --caret: var(--cta-light);
}