/*
 * EWB Courses — Design tokens
 * Source of truth: DESIGN.md prose section (Deep Navy / Electric Cyan /
 * Neon Lime / Graphite Grey / Soft Beige / WhatsApp Green). These are plain
 * CSS custom properties, not a Sass build — components.css consumes them.
 */

:root {
    /* Brand colors */
    --color-deep-navy: #0A1330;
    --color-electric-cyan: #0088FF;
    --color-neon-lime: #A6FF00;
    --color-graphite-grey: #1F2328;
    --color-soft-beige: #F5F1E0;
    --color-whatsapp-green: #25D366;
    --color-white: #FFFFFF;

    /* Semantic roles */
    --color-bg: var(--color-deep-navy);
    --color-surface: var(--color-graphite-grey);
    --color-surface-alpha: rgba(31, 35, 40, 0.7);
    --color-text: var(--color-white);
    --color-text-muted: rgba(255, 255, 255, 0.72);
    --color-primary: var(--color-electric-cyan);
    --color-secondary: var(--color-neon-lime);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 255, 255, 0.3);
    --color-error: #FF6B6B;

    /* Elevation / glow — premium depth layer, brand colors only */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.28);
    --shadow-glow-cyan: 0 0 32px rgba(0, 136, 255, 0.28);
    --shadow-glow-lime: 0 0 32px rgba(166, 255, 0, 0.22);
    --gradient-primary: linear-gradient(135deg, #0088FF 0%, #35A6FF 100%);
    --gradient-accent: linear-gradient(120deg, var(--color-electric-cyan), var(--color-neon-lime));
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography */
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;

    --fs-display-lg: 4.5rem;
    /* 72px */
    --fs-headline-lg: 3rem;
    /* 48px */
    --fs-headline-lg-mobile: 2.25rem;
    /* 36px */
    --fs-headline-md: 2rem;
    /* 32px */
    --fs-kicker: 0.875rem;
    /* 14px */
    --fs-body-lg: 1.125rem;
    /* 18px */
    --fs-body-md: 1rem;
    /* 16px */
    --fs-label-md: 0.875rem;
    /* 14px */
    --fs-stat-number: 2.5rem;
    /* 40px */

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-default: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-full: 9999px;

    /* Spacing */
    --space-unit: 8px;
    --container-max: 1280px;
    --gutter: 24px;
    --margin-mobile: 20px;
    --section-gap-desktop: 120px;
    --section-gap-mobile: 64px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-default: 250ms ease;

    /* Bootstrap variable overrides so any un-customized Bootstrap component
       still lands on-brand by default (grid/utilities/JS behaviors are used
       as-is from Bootstrap; the visible "skin" is our own components.css). */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-body-font-family: var(--font-body);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-secondary);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-text);
    --bs-border-radius: var(--radius-default);
    --bs-border-radius-lg: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-default: 0ms;
    }
}

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

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body-md);
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

/* Subtle grain texture over the deep-navy canvas so large flat areas don't
   feel sterile, per DESIGN.md's "Elevation & Depth" guidance. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sophisticated dark-tech ambient backdrop — a fixed, subtle dot-grid overlaid
   on soft brand-color glows (cyan top-left, lime top-right, cyan base). Fixed
   so it reads as a persistent atmosphere rather than scrolling section art;
   pointer-events:none + low alpha keeps it decorative-only, same technique as
   body::before above. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
        radial-gradient(760px circle at 8% 4%, rgba(0, 136, 255, 0.16), transparent 60%),
        radial-gradient(680px circle at 94% 14%, rgba(166, 255, 0, 0.11), transparent 60%),
        radial-gradient(640px circle at 50% 105%, rgba(0, 136, 255, 0.10), transparent 65%);
    background-size: 32px 32px, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    margin: 0 0 0.5em;
}

h1 {
    font-size: var(--fs-headline-lg-mobile);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
}

h3 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 992px) {
    h1 {
        font-size: var(--fs-headline-lg);
    }
}

.display-lg {
    font-family: var(--font-heading);
    font-size: var(--fs-headline-lg-mobile);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

@media (min-width: 992px) {
    .display-lg {
        font-size: var(--fs-display-lg);
    }
}

.kicker {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--fs-kicker);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: var(--fs-stat-number);
    font-weight: 800;
    line-height: 1;
    color: var(--color-secondary);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

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

.container-app {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}

@media (min-width: 992px) {
    .container-app {
        padding-inline: var(--gutter);
    }
}

section {
    position: relative;
    padding-block: var(--section-gap-mobile);
}

@media (min-width: 992px) {
    section {
        padding-block: calc(var(--section-gap-desktop) / 2);
    }
}

/* Accessibility: visible focus state everywhere, keyboard-first */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--color-primary);
    color: var(--color-deep-navy);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-default);
    font-weight: 600;
}

.skip-link:focus {
    left: var(--margin-mobile);
    top: var(--margin-mobile);
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}