/* ==========================================================
   MARKETING AGENCY COCKPIT
   Design System v1.0
========================================================== */

:root{

/* ==========================================================
   COLORS
========================================================== */

--bg:#060A10;
--bg-secondary:#0B1119;
--panel:#101721;
--panel-light:#151F2B;

--border:#1F2A36;
--border-light:#2B3847;

--text:#F5F7FA;
--text-secondary:#B7C3CF;
--text-muted:#7F91A3;

--orange:#E8521A;
--orange-light:#FF6A32;
--orange-glow:rgba(232,82,26,.35);

--green:#32D583;
--green-glow:rgba(50,213,131,.30);

--yellow:#FDB022;
--yellow-glow:rgba(253,176,34,.30);

--red:#F04438;
--red-glow:rgba(240,68,56,.30);

--blue:#38BDF8;
--blue-glow:rgba(56,189,248,.30);

/* ==========================================================
   STATUS COLORS
========================================================== */

--status-autopilot:var(--green);
--status-attention:var(--yellow);
--status-critical:var(--red);
--status-active:var(--orange);

/* ==========================================================
   TYPOGRAPHY
========================================================== */

--font:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;

--font-mono:
"JetBrains Mono",
"SF Mono",
Consolas,
monospace;

--fs-xs:11px;
--fs-sm:13px;
--fs-md:15px;
--fs-lg:18px;
--fs-xl:24px;
--fs-2xl:34px;
--fs-3xl:52px;

/* ==========================================================
   FONT WEIGHTS
========================================================== */

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

/* ==========================================================
   SPACING
========================================================== */

--space-4:4px;
--space-8:8px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;
--space-40:40px;
--space-48:48px;

/* ==========================================================
   RADIUS
========================================================== */

--radius-sm:8px;
--radius-md:14px;
--radius-lg:20px;
--radius-xl:28px;

/* ==========================================================
   SHADOWS
========================================================== */

--shadow-panel:
0 10px 30px rgba(0,0,0,.30);

--shadow-orange:
0 0 24px rgba(232,82,26,.25);

--shadow-green:
0 0 20px rgba(50,213,131,.22);

--shadow-blue:
0 0 18px rgba(56,189,248,.20);

/* ==========================================================
   GLASS
========================================================== */

--glass:
rgba(255,255,255,.03);

--glass-border:
rgba(255,255,255,.06);

--blur:18px;

/* ==========================================================
   GRID
========================================================== */

--container:1920px;

--header-height:88px;

--gap:24px;

/* ==========================================================
   TRANSITIONS
========================================================== */

--transition-fast:.18s;

--transition:.35s cubic-bezier(.4,0,.2,1);

--transition-slow:.6s cubic-bezier(.4,0,.2,1);

/* ==========================================================
   Z INDEX
========================================================== */

--z-header:100;

--z-modal:1000;

--z-tooltip:2000;

}