/* ===========================================================
   THE AI ACE
   Global Design System
   =========================================================== */

:root{

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

--color-primary:#ffb400;
--color-primary-light:#ffd15a;
--color-primary-dark:#d68e00;

--color-accent:#00b7ff;
--color-accent-light:#4fd4ff;

--color-success:#1dd75b;
--color-warning:#ffbf00;
--color-danger:#ff5252;

--color-white:#ffffff;
--color-black:#000000;


/* ===========================================================
   BACKGROUNDS
   =========================================================== */

--bg-primary:#040b13;
--bg-secondary:#08131d;
--bg-card:#0c1d2d;
--bg-card-hover:#13283b;
--bg-glass:rgba(255,255,255,.03);


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

--text-primary:#ffffff;
--text-secondary:#b4bfd1;
--text-muted:#7b8798;

--text-gold:#ffb400;
--text-blue:#37b9ff;


/* ===========================================================
   BORDERS
   =========================================================== */

--border-color:#174e6c;
--border-light:#2b678a;


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

--font-family:'Inter',sans-serif;

--font-size-xs:.75rem;
--font-size-sm:.9rem;
--font-size-md:1rem;
--font-size-lg:1.15rem;
--font-size-xl:1.4rem;
--font-size-2xl:2rem;
--font-size-3xl:2.7rem;


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

--fw-light:300;
--fw-normal:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:900;


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

--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:24px;
--space-xl:32px;
--space-2xl:48px;
--space-3xl:72px;


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

--radius-sm:8px;
--radius-md:14px;
--radius-lg:18px;
--radius-xl:28px;
--radius-round:999px;


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

--shadow-sm:0 4px 12px rgba(0,0,0,.15);

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

--shadow-lg:0 18px 50px rgba(0,0,0,.42);

--shadow-gold:0 0 35px rgba(255,180,0,.22);

--shadow-blue:0 0 35px rgba(0,183,255,.18);


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

--transition-fast:.18s;

--transition:.3s;

--transition-slow:.5s;


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

--container:1380px;


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

--header-height:74px;


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

--z-dropdown:100;
--z-header:500;
--z-modal:900;
--z-loader:9999;


/* ===========================================================
   GRADIENTS
   =========================================================== */

--gradient-gold:
linear-gradient(
135deg,
#ffd86a,
#ffb400
);

--gradient-blue:
linear-gradient(
135deg,
#009dff,
#00d8ff
);

--gradient-dark:
linear-gradient(
180deg,
#08131d,
#040b13
);

}