/* ============================================================
   SHARED STYLES
   Relev8 design system. Imported by all pages.
   Source of truth: Relev8_Design_Guidelines.md
   ============================================================ */

/* ------------------------------------------------------------
   COLOR TOKENS
   ------------------------------------------------------------ */

:root {
    --midnight: #021E1D;
    --dark-teal: #003D3C;
    --teal: #29C4CC;
    --deep-aqua: #00A2AA;
    --bright-cyan: #5EDFE5;
    --light-aqua: #94DCE0;
    --mint-white: #F4F9F9;

    /* One-off near-mint card tint (not an alpha of mint-white; standalone hex) */
    --mint-shade: #E8F1F1;

    /* --- ALPHA VARIANTS — derived from base tokens via color-mix() ---
       5-step ladder. Three intensity tiers:
         20+ Loud         actionable, demands attention
         10  Structural   visible, defines hierarchy
         05  Atmospheric  barely-there, ambient
       Same alpha can serve multiple roles (e.g. -10 covers both
       borders and hover-fills). */

    --midnight-80: color-mix(in srgb, var(--midnight) 80%, transparent);
    --midnight-70: color-mix(in srgb, var(--midnight) 70%, transparent);
    --midnight-50: color-mix(in srgb, var(--midnight) 50%, transparent);
    --midnight-10: color-mix(in srgb, var(--midnight) 10%, transparent);
    --midnight-05: color-mix(in srgb, var(--midnight)  5%, transparent);

    --mint-white-20: color-mix(in srgb, var(--mint-white) 20%, transparent);
    --mint-white-10: color-mix(in srgb, var(--mint-white) 10%, transparent);
    --mint-white-05: color-mix(in srgb, var(--mint-white)  5%, transparent);

    --light-aqua-80: color-mix(in srgb, var(--light-aqua) 80%, transparent);
    --light-aqua-70: color-mix(in srgb, var(--light-aqua) 70%, transparent);
    --light-aqua-40: color-mix(in srgb, var(--light-aqua) 40%, transparent);

    --teal-30: color-mix(in srgb, var(--teal) 30%, transparent);
    --teal-15: color-mix(in srgb, var(--teal) 15%, transparent);
    --teal-05: color-mix(in srgb, var(--teal)  5%, transparent);

    --bright-cyan-40: color-mix(in srgb, var(--bright-cyan) 40%, transparent);

    --deep-aqua-30: color-mix(in srgb, var(--deep-aqua) 30%, transparent);
    --deep-aqua-15: color-mix(in srgb, var(--deep-aqua) 15%, transparent);

    /* Pure-black shadow (not a brand colour) */
    --shadow-40: color-mix(in srgb, black 40%, transparent);
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */

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

/* ------------------------------------------------------------
   ACCESSIBILITY — skip-to-content link
   Hidden until keyboard focus reveals it.
   ------------------------------------------------------------ */

.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--mint-white);
    color: var(--midnight);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
    left: 0;
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   FONT FAMILIES
   ------------------------------------------------------------ */

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--midnight);
    color: var(--mint-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Host Grotesk', sans-serif;
}

/* ------------------------------------------------------------
   TYPE SCALE
   7 steps. Every text element maps to one. No ad-hoc sizes.
   See Relev8_Design_Guidelines.md for rules.
   ------------------------------------------------------------ */

/* Display: hero numbers, large display text */
.type-display {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 600;
    font-size: 88px;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Section: section headings */
.type-section {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.2;
}

/* Subheading: taglines, category titles */
.type-subheading {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
}

/* Lead: framing text, subheadings */
.type-lead {
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
}

/* Body: descriptions, context lines */
.type-body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

/* Label: slider labels, metadata, uppercase markers */
.type-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
}

/* Caption: orientation cues, dimmed annotations */
.type-caption {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
}

/* ------------------------------------------------------------
   TYPE SCALE — MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {
    .type-display {
        font-size: 48px;
        letter-spacing: -0.01em;
    }

    .type-section {
        font-size: 28px;
    }

    .type-subheading {
        font-size: 20px;
    }

    .type-lead {
        font-size: 16px;
    }

    .type-body {
        font-size: 15px;
    }

    .type-label {
        font-size: 12px;
    }

    /* Caption stays 11px on mobile */
}

/* ------------------------------------------------------------
   LOGO (ambient, bottom-right)
   ------------------------------------------------------------ */

.page-logo {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    opacity: 0.4;
    transition: opacity 0.2s ease;
    text-decoration: none;
    display: block;
    line-height: 0;
}

.page-logo:hover {
    opacity: 0.6;
}

.page-logo img {
    height: 20px;
    width: auto;
}

@media (max-width: 767px) {
    .page-logo {
        bottom: 12px;
        right: 12px;
    }
}

/* ------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------ */

/* Line break visible only on mobile */
@media (min-width: 768px) {
    .mobile-only-br {
        display: none;
    }
}

/* Tabular numbers for dynamic values */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Uppercase label treatment */
.type-label-upper {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}