/* =========================
   BASE: THEME TOKENS
   ========================= */

:root {
    /* Brand colors */
    --color-navy: #0F172A;
    --color-sage: #10B981;
    --color-orange: #F59E0B;
    --color-vapor: #F8FAFC;

    /* Neutral palette (slate style) */
    --color-slate-50:  #F8FAFC;
    --color-slate-100: #F1F5F9;
    --color-slate-200: #E2E8F0;
    --color-slate-300: #CBD5E1;
    --color-slate-400: #94A3B8;
    --color-slate-500: #64748B;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1E293B;
    --color-slate-900: #0F172A;
    --color-slate-950: #020617;

    /* Semantic colors */
    --color-body-bg: var(--color-vapor);
    --color-body-text: var(--color-slate-800);
    --color-link: #2563EB;
    --color-link-hover: #1D4ED8;

    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.08);
    --shadow-strong: 0 18px 40px rgba(15, 23, 42, 0.3);
    --shadow-orange: 0 10px 25px rgba(245, 158, 11, 0.35);
}

/* =========================
   GLOBAL ELEMENTS
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-body-text);
    background-color: var(--color-body-bg);
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--color-navy);
    margin: 0 0 var(--space-sm);
}

h1 {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-snug);
}

h3 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-snug);
}

h4 {
    font-size: var(--font-size-xl);
}

p {
    margin: 0 0 var(--space-sm);
    color: var(--color-slate-700);
}

small {
    font-size: var(--font-size-xs);
}

/* Basic elements */

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
}

ul, ol {
    padding-left: 1.25rem;
    margin: 0 0 var(--space-sm);
}

li {
    margin-bottom: 0.25rem;
}

img {
    max-width: 100%;
    display: block;
}

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

.bg-navy { background-color: var(--color-navy) !important; }
.text-navy { color: var(--color-navy) !important; }

.bg-sage { background-color: var(--color-sage) !important; }
.text-sage { color: var(--color-sage) !important; }

.bg-orange { background-color: var(--color-orange) !important; }
.text-orange { color: var(--color-orange) !important; }

.bg-vapor { background-color: var(--color-vapor) !important; }

.bg-page { background-color: var(--color-body-bg) !important; }
.text-page { color: var(--color-body-text) !important; }

/* =========================
   HERO BACKGROUND PATTERN
   ========================= */

.hero-pattern {
    background-color: var(--color-navy);
    background-image: radial-gradient(#1e293b 1px, transparent 1px);
    background-size: 30px 30px;
}

/* =========================
   LOGO MARQUEE LAYOUT
   (animation in animations.css)
   ========================= */

.logo-marquee {
    overflow: hidden;
    position: relative;
}

.logo-marquee-track {
    display: flex;
    gap: 3rem;
    align-items: center;
    width: max-content;
}

/* =========================
   TAILWIND UTILITY OVERRIDES
   map Tailwind classes to your tokens so
   you can theme without touching the HTML
   ========================= */

/* Font sizes */

.text-xs   { font-size: var(--font-size-xs) !important; }
.text-sm   { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg   { font-size: var(--font-size-lg) !important; }
.text-xl   { font-size: var(--font-size-xl) !important; }
.text-2xl  { font-size: var(--font-size-2xl) !important; }
.text-3xl  { font-size: var(--font-size-3xl) !important; }
.text-4xl  { font-size: var(--font-size-4xl) !important; }
.text-5xl  { font-size: var(--font-size-5xl) !important; }
.text-6xl  { font-size: var(--font-size-6xl) !important; }

/* Font weights, if you want to adjust globally */

.font-light    { font-weight: 300 !important; }
.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }

/* Text colors */

.text-slate-300 { color: var(--color-slate-300) !important; }
.text-slate-400 { color: var(--color-slate-400) !important; }
.text-slate-500 { color: var(--color-slate-500) !important; }
.text-slate-600 { color: var(--color-slate-600) !important; }
.text-slate-700 { color: var(--color-slate-700) !important; }
.text-slate-800 { color: var(--color-slate-800) !important; }
.text-slate-900 { color: var(--color-slate-900) !important; }

/* Background colors */

.bg-slate-50  { background-color: var(--color-slate-50) !important; }
.bg-slate-100 { background-color: var(--color-slate-100) !important; }
.bg-slate-200 { background-color: var(--color-slate-200) !important; }
.bg-slate-300 { background-color: var(--color-slate-300) !important; }
.bg-slate-800 { background-color: var(--color-slate-800) !important; }
.bg-slate-900 { background-color: var(--color-slate-900) !important; }

/* Blue text utilities mapped to link colors */

.text-blue-600 { color: var(--color-link) !important; }
.text-blue-800 { color: var(--color-link-hover) !important; }