:root {
/* =========================================
CORE COLOR SYSTEM
========================================= */
--dark: #0f113a;
--light: #f5f5f3;
--gold: #efc404;
--white: #ffffff;


/* =========================================
SHADE SYSTEM
========================================= */

--dark-04:
rgba(15,17,58,0.04);

--dark-34:
rgba(15,17,58,0.34);

--dark-52:
rgba(15,17,58,0.52);

--dark-54:
rgba(15,17,58,0.54);

--dark-72:
rgba(15,17,58,0.72);

--dark-74:
rgba(15,17,58,0.74);


--white-12:
rgba(255,255,255,0.12);

--white-24:
rgba(255,255,255,0.24);

--white-36:
rgba(255,255,255,0.36);

--white-56:
rgba(255,255,255,0.56);

--white-72:
rgba(255,255,255,0.72);

--white-82:
rgba(255,255,255,0.82);



/* =========================================
SEMANTIC COLOR SYSTEM
========================================= */

--surface-primary:
var(--white);

--surface-secondary:
var(--white-72);

--surface-dark:
var(--dark-04);

--text-primary:
var(--dark);

--text-secondary:
#6e6e73;

--text-muted:
var(--dark-52);

--text-soft:
var(--dark-74);

--text-heading-light:
var(--white);

--text-heading-dark:
var(--dark);


/* =========================================
OVERLAY SYSTEM
========================================= */

--overlay-dark-soft:
var(--dark-34);

--overlay-dark-medium:
var(--dark-54);

--overlay-dark-strong:
var(--dark-72);

--overlay-light-soft:
var(--white-24);

--overlay-light-medium:
var(--white-56);

--overlay-light-strong:
var(--white-82);


/* =========================================
OPACITY SYSTEM
========================================= */

--opacity-soft: 0.08;

--opacity-medium: 0.18;

--opacity-strong: 0.32;

--opacity-heavy: 0.72;


/* =========================================
GLASS SYSTEM
========================================= */
--glass-surface-light:
rgba(255,255,255,0.72);
--glass-surface-strong:
rgba(255,255,255,0.82);
--glass-overlay-light:
rgba(255,255,255,0.12);
--glass-overlay-medium:
rgba(255,255,255,0.36);
--glass-overlay-dark:
rgba(15,17,58,0.72);
--blur-glass-sm: blur(8px);
--blur-glass-md: blur(18px);
--blur-glass-lg: blur(32px);


/* =========================================
TYPOGRAPHY
========================================= */
--font-family: 'Inter', sans-serif;


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

--weight-regular: 400;
--weight-book: 450;
--weight-medium: 500;
--weight-semibold: 550;
--weight-bold: 600;
--weight-heavy: 650;
--weight-black: 800;



/* =========================================
TYPE SCALE
========================================= */

--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-md: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.55rem;
--text-2xl: 1.75rem;

--headline-xl:
clamp(4rem, 7vw, 6.4rem);

--headline-lg:
clamp(2.8rem, 5vw, 5rem);

--headline-md:
clamp(2rem, 3vw, 3.2rem);

--label-size:
1rem;



/* =========================================
LINE HEIGHTS
========================================= */

--line-tight: 0.94;
--line-normal: 1.5;
--line-loose: 1.72;



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

--tracking-tight: -0.035em;
--tracking-normal: -0.01em;
--tracking-medium: 0.08em;
--tracking-wide: 0.16em;



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

--text-body:
var(--text-md);

--text-body-large:
var(--text-lg);

--text-caption:
var(--text-sm);

--text-label:
var(--label-size);

--text-navigation:
var(--text-sm);

--text-button:
var(--text-sm);



/* =========================================
HEADLINE ROLES
========================================= */

--headline-large-size:
var(--headline-xl);

--headline-large-weight:
var(--weight-heavy);

--headline-large-line:
var(--line-tight);

--headline-large-tracking:
var(--tracking-tight);



--headline-medium-size:
var(--headline-lg);

--headline-medium-weight:
var(--weight-semibold);

--headline-medium-line:
var(--line-tight);

--headline-medium-tracking:
var(--tracking-tight);



--headline-normal-size:
var(--headline-md);

--headline-normal-weight:
var(--weight-semibold);

--headline-normal-line:
var(--line-tight);

--headline-normal-tracking:
var(--tracking-tight);



--headline-small-size:
var(--text-xl);

--headline-small-weight:
var(--weight-semibold);

--headline-small-line:
var(--line-normal);

--headline-small-tracking:
var(--tracking-tight);



/* =========================================
LAYOUT SYSTEM
========================================= */

--header-height: 72px;


/* =========================================
SPACING SYSTEM
========================================= */
--section-padding-y: 160px;
--section-padding-x: 7%;
--input-width-sm: 320px;



/* =========================================
GLOBAL SPACING TOKENS
========================================= */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 140px;
--space-6xl: 200px;
--space-7xl: 260px;


/* =========================================
CONTAINER SYSTEM
========================================= */
--container-width: 1280px;
--container-narrow: 860px;
--container-wide: 1480px;


/* =========================================
CONTENT WIDTHS
========================================= */
--content-width-hero: 920px;


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

--hero-title-width: 8ch;

--hero-content-width: 920px;

--hero-padding-desktop:
0 var(--section-padding-x) var(--space-5xl);

--hero-padding-tablet:
0 var(--section-padding-x) var(--space-4xl);

--hero-padding-mobile:
180px 7% 80px;



/* =========================================
RADIUS SYSTEM
========================================= */
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;
--radius-xl: 40px;
--radius-pill: 999px;


/* =========================================
BORDER SYSTEM
========================================= */
--border-light:
1px solid rgba(255,255,255,0.14);
--border-medium:
1px solid rgba(255,255,255,0.18);
--border-dark:
1px solid rgba(0,0,0,0.06);
--border-dark-strong:
1px solid rgba(0,0,0,0.12);


/* =========================================
SHADOW SYSTEM
========================================= */
--shadow-soft:
0 4px 12px rgba(0,0,0,0.04);
--shadow-hover:
0 10px 30px rgba(0,0,0,0.08);
--shadow-inset-light:
inset 0 1px 0 rgba(255,255,255,0.42);

--shadow-inset-hover:
inset 0 1px 0 rgba(255,255,255,0.62);
--shadow-button-hover:
0 10px 28px rgba(0,0,0,0.12);
--shadow-floating:
0 8px 24px rgba(0,0,0,0.06),
0 24px 64px rgba(0,0,0,0.04);


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

--shadow-control:
0 6px 18px rgba(0,0,0,0.18);

--shadow-control-hover:
0 10px 24px rgba(0,0,0,0.22);


/* =========================================
MOTION SYSTEM
========================================= */

--motion-hover-lift:
translateY(-2px);

--motion-hover-reset:
translateY(0);

--motion-scale-soft:
scale(1.01);

--motion-scale-medium:
scale(1.03);


/* =========================================
TRANSITIONS
========================================= */
--transition-fast: 0.2s ease;
--transition-normal: 0.35s ease;
--transition-slow: 0.6s ease;

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

--transition-opacity:
opacity var(--transition-fast);

--transition-transform:
transform var(--transition-fast);

--transition-hover:
background var(--transition-fast),
opacity var(--transition-fast),
transform var(--transition-fast);

--transition-menu:
opacity var(--transition-fast),
transform var(--transition-fast),
visibility var(--transition-fast);

--transition-glass:
background var(--transition-normal),
border var(--transition-normal),
opacity var(--transition-normal);

--transition-button:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);

--transition-cinematic:
opacity var(--transition-slow),
transform var(--transition-slow);


/* =========================================
LAYER SYSTEM
========================================= */

--layer-background: 1;

--layer-overlay: 2;

--layer-content: 3;

--layer-floating: 10;


/* =========================================
Z-INDEX SYSTEM
========================================= */
--z-base: 1;
--z-header: 100;
--z-overlay: 1000;
--z-modal: 10000;
}