/**
 * biz-tokens.css — Design tokens (single source of truth)
 *
 * Mirrors portal token system (BRAND_GUIDELINES_B2B.md).
 * Every page CSS depends on these. Change here = changes everywhere.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    /* ─── BRAND ─────────────────────────────────────────────────────────── */
    --color-brand-blue:       #1A3E6F;
    --color-brand-blue-hover: #163459;
    --color-brand-blue-light: #244b82;
    --color-brand-blue-tint:  rgba(26, 62, 111, 0.12);
    --color-brand-gold:       #E2B659;
    --color-brand-gold-deep:  #c9971d;
    --color-brand-gold-soft:  #fffdf5;

    /* ─── NEUTRALS ──────────────────────────────────────────────────────── */
    --color-ink-900: #0f172a;
    --color-ink-800: #111827;
    --color-ink-700: #1f2937;
    --color-ink-600: #334155;
    --color-ink-500: #475569;
    --color-ink-400: #64748b;
    --color-ink-300: #94a3b8;
    --color-ink-200: #cbd5e1;
    --color-line:        #e2e8f0;
    --color-line-soft:   #f1f5f9;
    --color-surface:     #ffffff;
    --color-surface-tint:#f8fafc;
    --color-surface-cool:#f0f7ff;

    /* ─── SEMANTIC ──────────────────────────────────────────────────────── */
    --color-success:       #16a34a;
    --color-success-bg:    #f0fdf4;
    --color-warning:       #ea580c;
    --color-warning-bg:    #fff7ed;
    --color-warning-border:#fed7aa;
    --color-info:          #2563eb;
    --color-info-bg:       #eff6ff;
    --color-info-border:   #bfdbfe;
    --color-danger:        #dc2626;
    --color-danger-bg:     #fef2f2;
    --color-danger-border: #fecaca;

    /* ─── ROLES ─────────────────────────────────────────────────────────── */
    --bg-app:     var(--color-surface-tint);
    --bg-card:    var(--color-surface);
    --bg-hero:    var(--color-ink-900);
    --fg-strong:  var(--color-ink-900);
    --fg-default: var(--color-ink-600);
    --fg-muted:   var(--color-ink-400);
    --fg-on-dark: #ffffff;
    --fg-on-dark-muted: #94a3b8;

    /* ─── TYPOGRAPHY ────────────────────────────────────────────────────── */
    --font-sans: "Inter", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Menlo", monospace;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    --fs-display:    2.6rem;
    --fs-h1:         2.2rem;
    --fs-h2:         1.6rem;
    --fs-h3:         1.25rem;
    --fs-h4:         1.1rem;
    --fs-body:       1rem;
    --fs-body-sm:    0.92rem;
    --fs-caption:    0.85rem;
    --fs-overline:   0.78rem;
    --fs-micro:      0.68rem;

    --lh-tight:   1.2;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.6;

    --ls-display:         -0.5px;
    --ls-uppercase:       0.5px;
    --ls-uppercase-wide:  1.5px;

    /* ─── SPACING ───────────────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 30px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 80px;
    --space-11: 120px;

    /* ─── RADII ─────────────────────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:  10px;
    --radius-lg:  12px;
    --radius-xl:  14px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    /* ─── SHADOWS ───────────────────────────────────────────────────────── */
    --shadow-card-soft:    0 4px 15px rgba(0, 0, 0, 0.07);
    --shadow-card:         0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-elev:         0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-button:       0 4px 15px rgba(26, 62, 111, 0.20);
    --shadow-button-hover: 0 6px 20px rgba(26, 62, 111, 0.30);
    --shadow-modal:        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-focus-ring:   0 0 0 3px rgba(26, 62, 111, 0.12);

    /* ─── MOTION ────────────────────────────────────────────────────────── */
    --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-snappy:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:  0.15s;
    --duration-base:  0.2s;
    --duration-slow:  0.3s;

    /* ─── LAYOUT ────────────────────────────────────────────────────────── */
    --container-max:    1200px;
    --container-pad:    var(--space-8);
    --container-pad-sm: var(--space-5);
    --header-height:    72px;
}