:root {

/* ==========================================
   BRAND
========================================== */

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

--color-red: #E31C3D;
--color-teal: #0B9496;
--color-navy: #001626;

--color-red-dark: #8C0C23;
--color-teal-dark: #075A5C;

--color-charcoal: #1A1A1A;
--color-grey: #888888;

--color-surface-1: #050505;
--color-surface-2: #0D0D0D;
--color-surface-3: #151515;
--color-surface-4: #202020;

--text-primary: #FFFFFF;
--text-secondary: #D6D6D6;
--text-muted: #9D9D9D;

--border-light: rgba(var(--color-white-rgb),.08);
--border-medium: rgba(var(--color-white-rgb),.12);

--glass: rgba(var(--color-white-rgb),.05);
--glass-strong: rgba(var(--color-white-rgb),.08);

/* ==========================================
   SEMANTIC SURFACES
========================================== */

--surface-primary: var(--color-surface-1);
--surface-secondary: var(--color-surface-2);
--surface-tertiary: var(--color-surface-3);
--surface-quaternary: var(--color-surface-4);
--surface-navy: var(--color-navy);

/* ==========================================
   RGB VALUES (for rgba with opacity)
========================================== */

--color-black-rgb: 0, 0, 0;
--color-white-rgb: 255, 255, 255;
--color-red-rgb: 227, 28, 61;
--color-teal-rgb: 11, 148, 150;
--color-navy-rgb: 0, 22, 38;
--color-surface-1-rgb: 5, 5, 5;
--color-surface-2-rgb: 13, 13, 13;
--color-surface-3-rgb: 21, 21, 21;
--color-surface-4-rgb: 32, 32, 32;

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

--gradient-dark:
linear-gradient(
180deg,
var(--color-black),
var(--surface-navy)
);

--gradient-card:
linear-gradient(
145deg,
rgba(var(--color-white-rgb),.04),
rgba(var(--color-white-rgb),.01)
);

--gradient-red:
linear-gradient(
135deg,
var(--color-red),
var(--color-red-dark)
);

--gradient-teal:
linear-gradient(
135deg,
var(--color-teal),
var(--color-teal-dark)
);

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

--shadow-sm:
0 4px 20px rgba(var(--color-black-rgb),.25);

--shadow-md:
0 12px 40px rgba(var(--color-black-rgb),.35);

--shadow-lg:
0 20px 60px rgba(var(--color-black-rgb),.45);

--shadow-xl:
0 40px 100px rgba(var(--color-black-rgb),.55);

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

--radius-xs:8px;
--radius-sm:12px;
--radius-md:18px;
--radius-lg:24px;
--radius-xl:32px;
--radius-round:999px;

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

--display-xl:
clamp(3.6rem,6.3vw,5.4rem);

--display-lg:
clamp(3rem,5vw,4.5rem);

--heading-xl:
clamp(2.5rem,4vw,3.5rem);

--heading-lg:
clamp(2rem,3vw,2.75rem);

--heading-md:
clamp(1.6rem,2vw,2rem);

--body-lg:
clamp(1.15rem,1.3vw,1.25rem);

--body:
1rem;

--small:
0.92rem;

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

--space-xs:.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:4rem;
--space-xl:6rem;
--space-2xl:8rem;
--space-3xl:10rem;

/* ==========================================
   WIDTH
========================================== */

--container:1280px;
--reading:760px;

/* ==========================================
   ANIMATION
========================================== */

--speed-fast:.25s;
--speed:.45s;
--speed-slow:.8s;

--ease:
cubic-bezier(.22,.61,.36,1);

}