/* ======================================================
   INFOWORLD V2
   VARIABLES.CSS
   ====================================================== */

:root{

/* ===============================
   COLOR
=============================== */

--primary:#0ea5e9;
--primary-dark:#0284c7;
--primary-light:#38bdf8;

--secondary:#2563eb;

--success:#16a34a;

--warning:#f59e0b;

--danger:#dc2626;

/* ===============================
   NEUTRAL
=============================== */

--white:#ffffff;

--black:#111827;

--bg:#f5f7fb;

--surface:#ffffff;

--border:#e5e7eb;

--border-light:#f1f5f9;

/* ===============================
   TEXT
=============================== */

--text:#1f2937;

--text-light:#6b7280;

--text-muted:#9ca3af;

--text-white:#ffffff;

/* ===============================
   BREAKING NEWS
=============================== */

--breaking:#dc2626;

/* ===============================
   HERO
=============================== */

--hero-overlay:rgba(0,0,0,.55);

/* ===============================
   FOOTER
=============================== */

--footer:#0f172a;

--footer-light:#1e293b;

/* ===============================
   SOCIAL
=============================== */

--facebook:#1877f2;

--instagram:#e1306c;

--youtube:#ff0000;

--twitter:#000000;

--tiktok:#111111;

/* ===============================
   CONTAINER
=============================== */

--container:1320px;

--container-large:1440px;

--container-small:1140px;

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

--font:
"Inter",
"Segoe UI",
Arial,
sans-serif;

/* ===============================
   FONT SIZE
=============================== */

--fs-xs:.75rem;

--fs-sm:.875rem;

--fs-base:1rem;

--fs-md:1.1rem;

--fs-lg:1.3rem;

--fs-xl:1.6rem;

--fs-2xl:2rem;

--fs-3xl:2.6rem;

--fs-4xl:3.2rem;

/* ===============================
   FONT WEIGHT
=============================== */

--fw-400:400;

--fw-500:500;

--fw-600:600;

--fw-700:700;

--fw-800:800;

/* ===============================
   LINE HEIGHT
=============================== */

--lh:1.7;

--lh-title:1.25;

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

--radius-xs:4px;

--radius-sm:8px;

--radius:12px;

--radius-lg:18px;

--radius-xl:25px;

--radius-full:999px;

/* ===============================
   SHADOW
=============================== */

--shadow-xs:
0 1px 2px rgba(0,0,0,.05);

--shadow-sm:
0 2px 10px rgba(0,0,0,.06);

--shadow:
0 8px 25px rgba(0,0,0,.08);

--shadow-lg:
0 15px 45px rgba(0,0,0,.12);

--shadow-xl:
0 30px 60px rgba(0,0,0,.15);

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

--space-1:4px;

--space-2:8px;

--space-3:12px;

--space-4:16px;

--space-5:20px;

--space-6:24px;

--space-8:32px;

--space-10:40px;

--space-12:48px;

--space-16:64px;

--space-20:80px;

/* ===============================
   HEADER
=============================== */

--topbar-height:36px;

--header-height:80px;

/* ===============================
   SIDEBAR
=============================== */

--sidebar-width:340px;

/* ===============================
   TRANSITION
=============================== */

--transition:.25s ease;

--transition-slow:.45s ease;

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

--z-dropdown:100;

--z-sticky:500;

--z-fixed:900;

--z-modal:9999;

}

/* ===============================
   DARK MODE (Future)
=============================== */

.dark{

--bg:#111827;

--surface:#1f2937;

--text:#f9fafb;

--text-light:#d1d5db;

--border:#374151;

--footer:#020617;

}
/* ==========================================
DARK MODE
========================================== */

body.dark-mode{

--bg:#0f172a;

--white:#111827;

--text:#f8fafc;

--text-light:#cbd5e1;

--border:#334155;

background:var(--bg);

color:var(--text);

}