/*
 * JotaERP / Nutricao Suplementos - Design Tokens v1
 * Fonte de verdade: A7 (auditoria UX/UI)
 * Escopo: aplicar via classe .ds no body para nao quebrar Bootstrap legado
 */
:root, .ds {
    /* Brand verde */
    --brand-50:  #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;
    --brand-glow: rgba(5, 150, 105, .18);

    /* Acento energia (oferta, relampago, urgencia) */
    --energy-300: #fcd34d;
    --energy-500: #f59e0b;
    --energy-600: #d97706;
    --energy-700: #b45309;

    /* Neutros (slate) */
    --ink-50:  #f8fafc;
    --ink-100: #f1f5f9;
    --ink-200: #e2e8f0;
    --ink-300: #cbd5e1;
    --ink-400: #94a3b8;
    --ink-500: #64748b;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1e293b;
    --ink-900: #0f172a;
    --ink-950: #0b1220;
    --surface: #ffffff;

    /* Semanticos */
    --ok:     #16a34a;
    --warn:   #f59e0b;
    --danger: #dc2626;
    --info:   #0ea5e9;
    --pix:    #32bcad;

    /* B2B revendedor (azul corporativo, NUNCA mistura com B2C verde) */
    --biz-700: #1e3a5f;
    --biz-600: #234a78;
    --biz-50:  #eef2f9;

    /* Tipografia */
    --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

    /* Escala tipografica (1.2 ratio) */
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-38: 2.375rem;
    --fs-48: 3rem;

    /* Espacamento (4px base) */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Raios */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* Sombras */
    --s-1: 0 1px 2px rgba(15, 23, 42, .06);
    --s-2: 0 4px 12px rgba(15, 23, 42, .08);
    --s-3: 0 16px 32px -8px rgba(15, 23, 42, .12);
    --s-glow: 0 0 0 4px var(--brand-glow);

    /* Motion */
    --ease:     0.22s cubic-bezier(.2, .7, .2, 1);
    --ease-pop: 0.32s cubic-bezier(.34, 1.4, .64, 1);

    /* Tap target minimo (a11y) */
    --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
    :root, .ds {
        --ease:     0s;
        --ease-pop: 0s;
    }
}

/*
 * Utilitarios minimos opt-in (use .ds-btn-primary, .ds-card, etc.)
 * Nao define reset global para nao colidir com Bootstrap legado.
 */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-600);
    color: #fff;
    font-family: var(--font-text);
    font-weight: 600;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.ds-btn-primary:hover  { background: var(--brand-700); }
.ds-btn-primary:active { transform: translateY(1px); }
.ds-btn-primary:focus-visible {
    outline: 0;
    box-shadow: var(--s-glow);
}

.ds-btn-energy {
    background: var(--energy-500);
}
.ds-btn-energy:hover { background: var(--energy-600); }

.ds-btn-ghost {
    background: transparent;
    color: var(--brand-700);
    border: 1px solid var(--ink-200);
}
.ds-btn-ghost:hover {
    border-color: var(--brand-500);
    color: var(--brand-700);
}

.ds-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--s-2);
    padding: var(--sp-6);
}

.ds-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-12);
    font-weight: 600;
    background: var(--brand-50);
    color: var(--brand-700);
}
.ds-pill--biz {
    background: var(--biz-50);
    color: var(--biz-700);
}
.ds-pill--energy {
    background: #fef3c7;
    color: var(--energy-700);
}
.ds-pill--pix {
    background: #e6f9f6;
    color: var(--pix);
}

/* Texto sobre branco precisa de --brand-700 para passar AAA em corpo pequeno. */
.ds-text-brand     { color: var(--brand-700); }
.ds-text-energy    { color: var(--energy-700); }
.ds-text-mute      { color: var(--ink-500); }
.ds-text-strong    { color: var(--ink-900); }

/* Display tipografico */
.ds-display {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.ds-headline {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
}
.ds-body {
    font-family: var(--font-text);
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink-700);
}