/* ==================================================================
   OZAVION — Core stylesheet
   Design tokens, reset, base typography & layout primitives.
   Component classes live in components.css.
   Media queries live in responsive.css.
   ================================================================== */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
    /* --- Color: base / dark surfaces (warm near-black) --- */
    --color-bg:            #0B0C10;
    --color-bg-alt:        #0F1015;
    --color-surface:       #14161D;
    --color-surface-2:     #1B1E27;
    --color-surface-3:     #242833;

    /* --- Color: borders & dividers (hairlines) --- */
    --color-border:        rgba(255, 255, 255, 0.07);
    --color-border-strong: rgba(255, 255, 255, 0.14);

    /* --- Color: text (warm off-white) --- */
    --color-text:          #F0EFEB;
    --color-text-soft:     #A6A8AF;
    --color-text-muted:    #71747C;

    /* --- Color: accent (one disciplined indigo, used sparingly) --- */
    --color-accent:        #5B79F0;  /* refined indigo */
    --color-accent-2:      #7C8CF8;  /* lighter indigo (small highlights) */
    --color-accent-3:      #5B79F0;  /* collapsed — no rainbow */
    --color-accent-soft:   rgba(91, 121, 240, 0.13);
    --color-on-accent:     #FFFFFF;

    /* --- Color: light sections (warm paper) --- */
    --color-light-bg:        #FBFAF7;
    --color-light-surface:   #F2F1EC;
    --color-light-border:    #E4E2DA;
    --color-light-text:      #14151A;
    --color-light-text-soft: #565862;

    /* --- Color: status --- */
    --color-success:       #22C55E;

    /* --- Typography --- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
                 Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --fs-xs:   0.78rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    --fs-3xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
    --fs-4xl:  clamp(3rem, 1.8rem + 5vw, 5.25rem);

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-base:  1.6;

    --tracking-tight: -0.02em;
    --tracking-wide:  0.08em;

    /* --- Spacing scale (4px base) --- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* --- Layout --- */
    --container-max: 1200px;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);

    /* --- Border radius --- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-pill: 999px;

    /* --- Shadows --- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.38);
    --shadow-lg:   0 26px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 1px rgba(91, 121, 240, 0.22), 0 18px 44px rgba(0, 0, 0, 0.45);

    /* --- Gradients --- */
    --gradient-accent: linear-gradient(135deg, #5B79F0 0%, #7C8CF8 100%);
    --gradient-brand:  linear-gradient(135deg, #5B79F0 0%, #8AA0F5 100%);
    --gradient-text:   linear-gradient(180deg, #F4F3EF 0%, #BFC3CE 100%);
    --gradient-line:   linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    --gradient-glow:   radial-gradient(55% 45% at 50% 0%, rgba(91,121,240,0.08), transparent 72%);

    /* --- Transitions --- */
    --ease:            cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms var(--ease);
    --transition:      250ms var(--ease);
    --transition-slow: 400ms var(--ease-out);

    /* --- Misc --- */
    --header-height: 72px;
    --z-header: 1000;
    --z-drawer: 1100;
}

/* ------------------------------------------------------------------
   2. RESET / NORMALISE
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

img,
picture,
svg,
video { display: block; max-width: 100%; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul[class],
ol[class] { list-style: none; padding: 0; }

:focus-visible {
    outline: 2px solid var(--color-accent-2);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #fff;
}

/* ------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    color: var(--color-text);
    text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { color: var(--color-text-soft); }

p a { color: var(--color-accent-2); }
p a:hover { text-decoration: underline; }

small { font-size: var(--fs-sm); }

code, kbd, pre { font-family: var(--font-mono); }

/* ------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------ */

/* Container -------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container--narrow { max-width: 820px; }
.container--wide   { max-width: 1360px; }

/* Section ---------------------------------------------------------- */
.section {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 7rem);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--flush-top { padding-top: 0; }

/* Light section variant */
.section--light {
    background: var(--color-light-bg);
    color: var(--color-light-text);
}
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4 { color: var(--color-light-text); }
.section--light p { color: var(--color-light-text-soft); }

/* Subtle alternating dark surface */
.section--alt { background: var(--color-bg-alt); }

/* Decorative top glow for hero-like sections */
.section--glow::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 480px;
    background: var(--gradient-glow);
    pointer-events: none;
    z-index: 0;
}

/* Grid layout ------------------------------------------------------ */
.grid {
    display: grid;
    gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Two-column layout ------------------------------------------------ */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.two-col--media-first .two-col__media { order: -1; }

/* ------------------------------------------------------------------
   5. UTILITY HELPERS
   ------------------------------------------------------------------ */
.text-center  { text-align: center; }
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-soft  { color: var(--color-text-soft); }
.text-muted { color: var(--color-text-muted); }

.stack    { display: flex; flex-direction: column; }
.stack-sm { gap: var(--space-3); }
.stack-md { gap: var(--space-5); }
.stack-lg { gap: var(--space-7); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mt-auto { margin-top: auto; }
.is-hidden { display: none !important; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-drawer);
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent);
    color: #fff;
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------------
   W11 — Polish & overflow safety
   ------------------------------------------------------------------ */
/* Prevent long content from blowing out flex/grid tracks (a common
   source of horizontal scroll on mobile). */
.grid > *,
.two-col > *,
.cluster > *,
.stats-grid > * { min-width: 0; }

/* Buttons never exceed their container. */
.btn { max-width: 100%; }

/* Long words / URLs wrap instead of forcing horizontal scroll. */
p, li, h1, h2, h3, h4, .lead { overflow-wrap: break-word; }