/*
 * v2/css/base.css — design tokens, reset, and typography foundation.
 *
 * Load order (when pages are wired up):
 *   1. base.css
 *   2. components.css
 *   3. layout.css
 *   4. pages/*.css (e.g. home.css on index only)
 *
 * Extracted from legacy style.css :root and base layers.
 * All colours live in :root only — components/layout must use var().
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    /* --- Colours: backgrounds --- */
    --bg-base: #1D1D1D;
    --bg-surface: #232323;
    --bg-surface-light: #363636;
    --hero-bg: #1d1d1d9d;

    /* --- Colours: accents --- */
    --accent-primary: #48BFFF;
    --accent-hover: #9fddff;
    --accent-blue: #48BFFF;
    --accent-blue-hover: #48BFFF;
    --accent-secondary: #363636; /* student page overrides to bright teal in pages/student.css */

    /* --- Colours: CTA gradient (animated .btn--cta hover) --- */
    --cta-gradient-start: #0c77c4;
    --cta-gradient-mid: #12d8fa;
    --cta-gradient-end: #1fa2ff;
    --cta-gradient: linear-gradient(
        to right,
        var(--cta-gradient-start) 0%,
        var(--cta-gradient-mid) 51%,
        var(--cta-gradient-end) 100%
    );
    --cta-gradient-transition: 0.5s ease;
    --cta-text: #ffffff;

    /* --- Colours: text --- */
    --text-main: #E2E2E2;
    --text-muted: #a0a89e;
    --text-nav-muted: #7d8e8c;
    --text-cream: #E2E2E2;
    --text-on-accent: #ffffff;

    /* --- Colours: feedback --- */
    --error: #F06543;
    /* Distinct from --accent-primary so success alerts read clearly on dark UI */
    --success: #6bc98a;
    --warning: #E6C84A;
    --info: var(--accent-blue);

    /* --- Colours: state (selected / pinned chips) --- */
    --state-active-bg: #c1e1f9;   /* pale blue tint of --accent-primary */
    --state-active-text: #0f2744; /* deep navy for WCAG-safe contrast */

    /* --- Colours: cards & inputs --- */
    --card-bg: color-mix(in srgb, var(--bg-surface) 92%, white 8%);
    --card-border: rgba(179, 138, 88, 0.15);
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    --admin-input-border: rgba(64, 64, 64, 0.4);

    /* --- Colours: featured card --- */
    --featured-border: #48BFFF;
    --featured-gradient-start: #48bfff84;
    --featured-gradient-middle: #0057a87f;
    --featured-gradient-end: #00287d7b;   
    --featured-card-desc: #E2E2E2;
    --featured-card-price: #48BFFF;

    /* --- Colours: misc --- */
    --navbar-scrolled-bg: rgba(29, 29, 29, 0.95);
    --navbar-scrolled-border: rgba(255, 255, 255, 0.04);

    /* --- Typography: families --- */
    --font-heading: "Manrope", sans-serif;
    --font-body: "Noto Sans", sans-serif;

    /* --- Typography: scale --- */
    --text-xs: 0.75rem;
    --text-sm: 0.85rem;
    --text-base: 0.95rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 1.75rem);
    --text-h3: clamp(1.2rem, 2vw + 0.4rem, 1.375rem);
    --hero-quote-mark-size: 2em;

    /* --- Typography: line heights --- */
    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* --- Spacing scale --- */
    --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-container-x: var(--space-6);
    --space-section-y: var(--space-9);
    --space-section-y-compact: var(--space-8);

    /* --- Layout --- */
    --max-width: 1200px;
    --content-narrow: 37.5rem;
    --border-radius: 4px;
    --border-radius-pill: 1.25rem;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: border-color 0.25s ease, box-shadow 0.25s ease;

    /* --- Elevation --- */
    --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.2);
    --shadow-md: var(--card-shadow);
    --shadow-nav: 0 4px 18px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.4);

    /* --- Nav logo heights --- */
    --nav-logo-height-expanded: 7.5rem;
    --nav-logo-height-compact: 2.75rem;
    --nav-logo-height-mobile-expanded: 4.5rem;
    --nav-logo-height-mobile-compact: 1.75rem;

    /* --- Z-index --- */
    --z-nav: 1000;

    /* Breakpoints (use literal values in @media — vars not valid in queries):
       tablet 768px | desktop 1024px */
}

/* ==========================================================================
   Reset & global base
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    /* Keep scroll padding at 0 so anchored sections align with viewport top */
    scroll-padding-top: 0;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    background-color: var(--bg-base);
    color: var(--text-main);
    line-height: var(--leading-normal);
    overflow-x: hidden;
}

h1,
.logo {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--text-main);
}

h2,
h3,
h4 {
    font-weight: 400;
    color: var(--text-main);
    font-variation-settings: "wdth" 100;
    font-stretch: 100%;
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

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

ul,
ol {
    list-style: none;
}

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

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

button {
    cursor: pointer;
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.text-muted {
    color: var(--text-muted);
}

.text-link {
    color: var(--accent-primary);
    border-bottom: 1px solid transparent;
}

.text-link:hover {
    border-color: var(--accent-primary);
}

.section-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-5);
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 3.75rem;
    height: 2px;
    background: var(--accent-primary);
    margin-top: var(--space-2);
}

.section-title.center::after,
.center.section-title::after {
    margin-left: auto;
    margin-right: auto;
}

.section-desc {
    text-align: center;
    max-width: var(--content-narrow);
    margin: 0 auto var(--space-6);
    color: var(--text-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}