/**
 * Shop Design System — Tokens CSS
 * Cores, Tipografia, Geometria, Elevação e Espaçamentos Globais
 */
:root {
    /* Paleta de Cores Primárias e Secundárias */
    --s-color-primary: #004C97;
    --s-color-primary-hover: #003770;
    --s-color-secondary: #007791;
    --s-color-secondary-hover: #005b6e;
    --s-color-accent: #D9251B;
    --s-color-accent-hover: #b91c1c;

    /* Cores Neutras e de Fundo */
    --s-color-bg-body: #f8fafc;
    --s-color-bg-surface: #ffffff;
    --s-color-bg-light: #f1f5f9;
    --s-color-bg-cream: #faf5e8;
    --s-color-border: #e2e8f0;
    --s-color-border-dark: #cbd5e1;

    /* Tipografia e Textos */
    --s-font-main: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --s-color-text-main: #0f172a;
    --s-color-text-secondary: #334155;
    --s-color-text-muted: #64748b;
    --s-color-text-inverse: #ffffff;

    /* Geometria (Border Radius) */
    --s-radius-sm: 8px;
    --s-radius-md: 12px;
    --s-radius-lg: 16px;
    --s-radius-xl: 24px;
    --s-radius-pill: 9999px;

    /* Sombras e Elevação (Elevation) */
    --s-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --s-shadow-md: 0 4px 15px rgba(15, 23, 42, 0.06);
    --s-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.1);

    /* Layout & Containers */
    --s-container-max: 1320px;
    --s-container-pad: 1.25rem;

    /* Transição Padronizada */
    --s-transition-fast: all 0.15s ease;
    --s-transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}