/* ============================================================
   LAYER ORDER DECLARATION
   Establishes cascade priority. Later layers always win.
   Components/pages added by individual page files.
   ============================================================ */
@layer reset, tokens, base, layout, components, utilities;

/* ============================================================
   LAYER: RESET
   Modern CSS reset. Strips browser defaults without
   destroying useful semantics. Mobile-first baseline.
   ============================================================ */
@layer reset {

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

    html {
        font-size:                100%;
        -webkit-font-smoothing:   antialiased;
        -moz-osx-font-smoothing:  grayscale;
        text-rendering:           optimizeLegibility;
        -webkit-text-size-adjust: 100%;
        text-size-adjust:         100%;
        scroll-behavior:          smooth;
        scrollbar-gutter:         stable;
        /* Prevent horizontal scroll — clip not hidden
           (hidden creates a BFC, clip does not)        */
        overflow-x:               clip;
    }

    body {
        min-height:          100dvh;
        line-height:         1.5;
        overflow-x:          clip;
        overscroll-behavior: none;
        /* Full width without overflow trigger */
        max-width:           100%;
    }

    /* Remove list styles on role="list" elements */
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
    }

    /* Sensible anchor defaults */
    a {
        color:            inherit;
        text-decoration:  none;
        text-underline-offset: 0.15em;
    }

    /* Media defaults */
    img, svg, picture, video, canvas {
        display:   block;
        max-width: 100%;
        height:    auto;
    }

    /* Form elements inherit font */
    input, button, textarea, select {
        font:  inherit;
        color: inherit;
    }

    /* Button reset */
    button {
        cursor:     pointer;
        background: none;
        border:     none;
    }

    /* Semantic resets */
    address   { font-style: normal; }
    figure    { margin: 0; }
    fieldset  { border: none; padding: 0; margin: 0; min-width: 0; }
    legend    { padding: 0; }

    /* Overflow control on text elements */
    p, li, dd, figcaption, blockquote {
        overflow-wrap: break-word;
        word-break:    break-word;
    }

    /* Table reset */
    table { border-collapse: collapse; border-spacing: 0; }
    th    { text-align: inherit; font-weight: var(--weight-semibold); }

    /* Form element resets */
    textarea       { resize: vertical; }
    select         { -webkit-appearance: none; appearance: none; }
    summary        { cursor: pointer; }

    /* Native dialog reset */
    dialog         { padding: 0; border: none; max-width: unset; max-height: unset; }
    dialog::backdrop { background: oklch(0% 0 0 / 0.6); }

    /* Horizontal rule */
    hr {
        border:     none;
        height:     1px;
        background: var(--color-border);
        margin-block: var(--space-lg);
    }

    /* Selection highlight — brand-tinted */
    ::selection {
        background: oklch(50% 0.22 25 / 0.15);
        color:      var(--color-text-primary);
    }

    /* Placeholder text */
    ::placeholder {
        color:   var(--color-text-muted);
        opacity: 1; /* Firefox fix — defaults to 0.54 */
    }

    /* Color scheme — tells browser to style form controls for light */
    :root { color-scheme: light; }

    /* Focus — remove default, add back on :focus-visible */
    :focus         { outline: none; }
    :focus-visible {
        outline:        3px solid oklch(65% 0.25 250);
        outline-offset: 3px;
    }

    /* Minimum touch target — WCAG 2.5.5 (44x44) / 2.5.8 (24x24)
       Applied to all interactive elements at the reset level.
       Components can increase but never decrease below 44px.    */
    a, button, input, select, textarea, summary,
    [role="button"], [role="tab"], [role="checkbox"],
    [role="radio"], [role="switch"], [role="menuitem"] {
        min-height: 44px;
    }

    /* Inline links exempt from min-height (they flow in text) */
    p a, li a, dd a, td a, figcaption a { min-height: auto; }

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

/* ============================================================
   LAYER: TOKENS
   All design decisions as custom properties.
   Single source of truth for every value in the system.
   ============================================================ */
@layer tokens {
    :root {

        /* ── Brand colors (oklch) ────────────────────────── */
        --color-brand-primary:       oklch(50% 0.22 25);
        --color-brand-primary-dark:  oklch(38% 0.18 25);
        --color-brand-primary-light: oklch(72% 0.18 25);

        /* ── Surface colors ──────────────────────────────── */
        --color-surface-base:   oklch(97% 0.003 250);
        --color-surface-raised: oklch(94% 0.005 250);
        --color-surface-sunken: oklch(90% 0.006 250);

        /* ── Text colors ─────────────────────────────────── */
        --color-text-primary:   oklch(18% 0.01 250);
        --color-text-secondary: oklch(40% 0.01 250);
        --color-text-muted:     oklch(55% 0.01 250);
        --color-text-inverse:   oklch(99% 0 0);

        /* ── Dark surface (hero, footer, dark sections) ──── */
        --color-dark-900:        oklch(14% 0.005 270);
        --color-dark-800:        oklch(20% 0.005 270);
        --color-dark-text:       oklch(96% 0 0);
        --color-dark-text-muted: oklch(72% 0 0);

        /* ── Border ──────────────────────────────────────── */
        --color-border: oklch(88% 0.005 250);

        /* ── Semantic colors ──────────────────────────────── */
        --color-error:   oklch(52% 0.24 25);
        --color-success: oklch(55% 0.18 145);
        --color-warning: oklch(70% 0.18 70);

        /* ── Gradients ───────────────────────────────────── */
        --gradient-flame:          linear-gradient(90deg,  oklch(50% 0.22 25), oklch(62% 0.22 45), oklch(72% 0.18 70));
        --gradient-flame-subtle:   linear-gradient(135deg, oklch(50% 0.22 25 / 0.85), oklch(62% 0.22 45 / 0.7), oklch(72% 0.18 70 / 0.6));
        --gradient-flame-vertical: linear-gradient(180deg, oklch(50% 0.22 25), oklch(62% 0.22 45), oklch(72% 0.18 70));
        --gradient-flame-text:     linear-gradient(90deg,  oklch(55% 0.22 25), oklch(65% 0.22 45), oklch(78% 0.18 55));

        /* ── Font families ───────────────────────────────── */
        --font-heading: 'Bebas Neue', system-ui, sans-serif;
        --font-body:    'Archivo', system-ui, sans-serif;

        /* ── Font weights ────────────────────────────────── */
        --weight-regular:  400;
        --weight-medium:   500;
        --weight-semibold: 600;
        --weight-bold:     700;

        /* ── Font size scale (fluid clamp) ───────────────────
           Each step: clamp(min, preferred, max)
           min/max in rem, preferred uses vw for fluid scaling.
           Designed for 320px → 1440px viewport range.
           ──────────────────────────────────────────────────── */
        --text-xs:   clamp(0.6875rem, 0.66rem  + 0.14vw, 0.8125rem);  /* 11px → 13px */
        --text-sm:   clamp(0.8125rem, 0.78rem  + 0.16vw, 0.9375rem);  /* 13px → 15px */
        --text-base: clamp(0.9375rem, 0.90rem  + 0.18vw, 1.0625rem);  /* 15px → 17px */
        --text-md:   clamp(1.0625rem, 1.01rem  + 0.27vw, 1.25rem);    /* 17px → 20px */
        --text-lg:   clamp(1.25rem,   1.14rem  + 0.54vw, 1.625rem);   /* 20px → 26px */
        --text-xl:   clamp(1.5rem,    1.34rem  + 0.80vw, 2.0rem);     /* 24px → 32px */
        --text-2xl:  clamp(1.875rem,  1.63rem  + 1.20vw, 2.75rem);    /* 30px → 44px */
        --text-3xl:  clamp(2.25rem,   1.88rem  + 1.88vw, 3.625rem);   /* 36px → 58px */
        --text-4xl:  clamp(3rem,      2.40rem  + 3.00vw, 5.125rem);   /* 48px → 82px */
        --text-5xl:  clamp(3.75rem,   2.86rem  + 4.46vw, 6.875rem);   /* 60px → 110px */

        /* ── Line-height scale ───────────────────────────────
           Tighter for large display text, looser for body copy.
           Named semantically, not by number.
           ──────────────────────────────────────────────────── */
        --leading-none:    1;
        --leading-tight:   1.1;
        --leading-snug:    1.25;
        --leading-normal:  1.5;
        --leading-relaxed: 1.65;
        --leading-loose:   1.8;

        /* ── Letter-spacing scale ────────────────────────────
           Negative for large display, tight for headings,
           normal for body, wide for labels/eyebrows.
           ──────────────────────────────────────────────────── */
        --tracking-tighter: -0.02em;
        --tracking-tight:    0em;
        --tracking-normal:   0.01em;
        --tracking-wide:     0.04em;
        --tracking-wider:    0.08em;
        --tracking-widest:   0.12em;

        /* ── Spacing scale (fluid clamp) ─────────────────── */
        --space-2xs: clamp(0.25rem,  0.22rem + 0.14vw, 0.375rem);
        --space-xs:  clamp(0.5rem,   0.46rem + 0.18vw, 0.625rem);
        --space-sm:  clamp(0.75rem,  0.68rem + 0.36vw, 1rem);
        --space-md:  clamp(1rem,     0.86rem + 0.72vw, 1.5rem);
        --space-lg:  clamp(1.5rem,   1.25rem + 1.25vw, 2.375rem);
        --space-xl:  clamp(2rem,     1.61rem + 1.96vw, 3.375rem);
        --space-2xl: clamp(2.5rem,   1.96rem + 2.68vw, 4.375rem);
        --space-3xl: clamp(3.5rem,   2.68rem + 4.11vw, 6.375rem);

        /* ── Border radii ────────────────────────────────── */
        --radius-sm:   0.25rem;
        --radius-md:   0.5rem;
        --radius-lg:   0.75rem;
        --radius-xl:   1rem;
        --radius-2xl:  1.5rem;
        --radius-full: 9999px;

        /* ── Shadows ─────────────────────────────────────── */
        --shadow-sm:    0 1px  3px  oklch(0% 0 0 / 0.06), 0 1px  2px oklch(0% 0 0 / 0.04);
        --shadow-md:    0 4px  8px  oklch(0% 0 0 / 0.08), 0 2px  4px oklch(0% 0 0 / 0.04);
        --shadow-lg:    0 12px 24px oklch(0% 0 0 / 0.10), 0 4px  8px oklch(0% 0 0 / 0.05);
        --shadow-brand: 0 8px  24px oklch(50% 0.22 25 / 0.3);

        /* ── Transitions ─────────────────────────────────── */
        --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
        --ease-out:     cubic-bezier(0, 0, 0.2, 1);
        --ease-in:      cubic-bezier(0.4, 0, 1, 1);

        --duration-fast:   120ms;
        --duration-base:   200ms;
        --duration-slow:   350ms;
        --duration-slower: 500ms;

        --transition-fast: var(--duration-fast) var(--ease-in-out);
        --transition-base: var(--duration-base) var(--ease-in-out);
        --transition-slow: var(--duration-slow) var(--ease-in-out);

        /* ── Focus ring ───────────────────────────────────── */
        --focus-ring-color:  oklch(65% 0.25 250);
        --focus-ring-width:  3px;
        --focus-ring-offset: 3px;

        /* ── Z-index scale ────────────────────────────────── */
        --z-base:    1;
        --z-raised:  10;
        --z-sticky:  100;
        --z-overlay: 200;
        --z-modal:   300;
        --z-toast:   400;

        /* ── Container ────────────────────────────────────── */
        --container-max:    1240px;
        --container-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

        /* ── Breakpoint reference ─────────────────────────────
           CSS custom properties cannot be used in @media queries.
           These are documented here as the single source of truth.
           All media queries use min-width (mobile-first). Only
           one max-width permitted: 767px for nav re-hide.

           320px  — base floor (no query, mobile-first start)
           480px  — phablet / large phone
           640px  — small tablet / landscape phone
           768px  — tablet / nav break ★
           1024px — desktop
           1280px — wide desktop
           1440px — design ceiling / ultrawide
           ──────────────────────────────────────────────────── */
    }
}

/* ============================================================
   LAYER: BASE
   Element-level typography and default styles.
   No classes — just tag selectors setting the typographic
   rhythm for the entire site.
   ============================================================ */
@layer base {

    /* ── Body ────────────────────────────────────────────── */
    body {
        font-family:      var(--font-body);
        font-size:        var(--text-base);
        font-weight:      var(--weight-regular);
        line-height:      var(--leading-normal);
        letter-spacing:   var(--tracking-normal);
        color:            var(--color-text-primary);
        background-color: var(--color-surface-base);
    }

    /* ── Headings ────────────────────────────────────────────
       All headings use the display font (Bebas Neue).
       Sizes, line-heights, and tracking scale together:
         - Larger text → tighter leading + looser tracking
         - Smaller text → snugger leading + normal tracking
       ──────────────────────────────────────────────────────── */

    h1 {
        font-size:      var(--text-4xl);
        line-height:    var(--leading-tight);
        letter-spacing: var(--tracking-wide);
    }

    h2 {
        font-size:      var(--text-3xl);
        line-height:    var(--leading-tight);
        letter-spacing: var(--tracking-wide);
    }

    h3 {
        font-size:      var(--text-2xl);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-wide);
    }

    h4 {
        font-size:      var(--text-xl);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-wide);
    }

    h5 {
        font-size:      var(--text-lg);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-wider);
    }

    h6 {
        font-size:      var(--text-md);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-wider);
    }

    /* ── Body text ───────────────────────────────────────── */
    p {
        font-size:   var(--text-base);
        line-height: var(--leading-relaxed);
        max-width:   68ch; /* Comfortable reading measure */
    }

    small {
        font-size:   var(--text-sm);
        line-height: var(--leading-normal);
    }

    strong { font-weight: var(--weight-semibold); }
    em     { font-style: italic; }

    /* ── Links ───────────────────────────────────────────── */
    a:hover {
        text-decoration: underline;
    }

    /* ── Lists ───────────────────────────────────────────── */
    ul:not([role="list"]),
    ol:not([role="list"]) {
        padding-inline-start: 1.25em;
    }

    li + li { margin-top: var(--space-2xs); }

    /* ── Code / Pre ──────────────────────────────────────── */
    code {
        font-family:      var(--font-mono);
        font-size:        0.9em;
        padding:          0.15em 0.35em;
        background-color: var(--color-surface-raised);
        border:           1px solid var(--color-border);
        border-radius:    var(--radius-sm);
        overflow-wrap:    break-word;
    }

    pre {
        font-family:      var(--font-mono);
        font-size:        var(--text-sm);
        line-height:      var(--leading-relaxed);
        padding:          var(--space-md);
        background-color: var(--color-dark-900);
        color:            var(--color-dark-text);
        border-radius:    var(--radius-lg);
        overflow-x:       auto;
        tab-size:         4;
    }

    pre code {
        padding:    0;
        background: none;
        border:     none;
        font-size:  inherit;
    }

    /* ── Mark (highlight) ────────────────────────────────── */
    mark {
        background-color: oklch(85% 0.15 70);
        color:            var(--color-text-primary);
        padding:          0.05em 0.2em;
        border-radius:    var(--radius-sm);
    }

    /* ── Scroll offset for sticky headers ────────────────────
       WCAG 2.4.11 Focus Not Obscured — anchor targets and
       focused elements must not be hidden behind sticky nav.
       Adjust --scroll-offset when nav height is known.
       ──────────────────────────────────────────────────────── */
    html {
        scroll-padding-top: var(--space-3xl);
    }

    h1, h2, h3, h4, h5, h6 {
            font-family:    var(--font-heading);
            font-weight:    var(--weight-regular);
            /* Bebas Neue only has 400 */
        text-transform: uppercase;
            color:          var(--color-text-primary);
            text-wrap:      balance;
            scroll-margin-top: var(--space-3xl);
        }

    [id] {
        scroll-margin-top: var(--space-3xl);
    }

    /* ── Anchor focus ────────────────────────────────────── */
    a:focus-visible {
        outline:        var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        border-radius:  var(--radius-sm);
    }

    /* ── Scrollbar ───────────────────────────────────────── */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-brand-primary) var(--color-dark-800);
    }

    ::-webkit-scrollbar       { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--color-dark-800); border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb {
        background:    var(--gradient-flame-vertical);
        border-radius: var(--radius-full);
        border:        2px solid var(--color-dark-800);
    }
}

/* ============================================================
   KEYFRAMES
   Not in a @layer — animations are global, not cascade-dependent.
   Each page uses @media (prefers-reduced-motion: no-preference)
   to gate usage. The global kill switch in @layer reset handles
   the fallback.
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ============================================================
   LAYER: LAYOUT
   Container + structural utilities.
   ============================================================ */
@layer layout {

    /* ── Container ────────────────────────────────────────── */
    .container {
        width:          100%;
        max-width:      var(--container-max);
        margin-inline:  auto;
        padding-inline: var(--container-gutter);
    }

    /* Narrow container — for text-heavy content */
    .container--narrow {
        max-width: 48rem; /* ~768px */
    }

    /* Full-bleed — breaks out of container for edge-to-edge */
    .full-bleed {
        width:          100vw;
        margin-inline:  calc(-50vw + 50%);
    }

    /* ── Flow — vertical rhythm ───────────────────────────── */
    .flow > * + * {
        margin-top: var(--space-md);
    }

    .flow--lg > * + * {
        margin-top: var(--space-lg);
    }

    .flow--sm > * + * {
        margin-top: var(--space-sm);
    }

    /* ── Section spacing — consistent block padding ──────── */
    .section {
        padding-block: var(--space-3xl);
    }

    .section--sm {
        padding-block: var(--space-xl);
    }

    /* ── Grid system ──────────────────────────────────────────
       Mobile-first: 1 column base, expands at breakpoints.
       Always uses minmax(0, 1fr) to prevent grid blowout.
       Children get min-width: 0 to contain overflow.
       ──────────────────────────────────────────────────────── */
    .grid {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   var(--space-md);
    }

    /* Grid children — prevent overflow */
    .grid > * {
        min-width: 0;
    }

    /* Responsive column counts at established breakpoints */
    @media (min-width: 480px) {
        .grid--2-at-480 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 640px) {
        .grid--2        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid--2-at-640 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid--3-at-640 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (min-width: 768px) {
        .grid--2-at-768 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid--3-at-768 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

        /* Split layout — content + aside, asymmetric */
        .grid--split {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .grid--split-wide {
            grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .grid--3     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid--4     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (min-width: 1280px) {
        .grid--4-at-xl  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .grid--3-at-xl  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (min-width: 1440px) {
        .grid--4-at-2xl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .grid--5-at-2xl { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .grid--6-at-2xl { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }

    /* Grid gap variants */
    .grid--gap-sm  { gap: var(--space-sm); }
    .grid--gap-lg  { gap: var(--space-lg); }
    .grid--gap-xl  { gap: var(--space-xl); }

    /* Grid alignment */
    .grid--center  { align-items: center; }
    .grid--start   { align-items: start; }
    .grid--stretch { align-items: stretch; }

    /* ── Flex row utility ──────────────────────────────────── */
    .flex-row {
        display:   flex;
        flex-wrap: wrap;
        gap:       var(--space-md);
    }

    .flex-row--center {
        align-items: center;
    }

    .flex-row--between {
        justify-content: space-between;
    }

    .flex-row--gap-sm { gap: var(--space-sm); }
    .flex-row--gap-xs { gap: var(--space-xs); }

    /* ── Stack utility — vertical flex ────────────────────── */
    .stack {
        display:        flex;
        flex-direction: column;
        gap:            var(--space-md);
    }

    .stack--sm { gap: var(--space-sm); }
    .stack--xs { gap: var(--space-xs); }
    .stack--lg { gap: var(--space-lg); }
}

/* ============================================================
   LAYER: COMPONENTS
   Empty — individual pages add their component rules here.
   Example usage in a page file:
     /* Components in components.css */
   ============================================================ */

/* ============================================================
   LAYER: UTILITIES
   Overrides, helpers, visibility. Always win the cascade.
   ============================================================ */
@layer utilities {

    /* Screen reader only — visually hidden, accessible */
    .sr-only {
        position:   absolute;
        width:      1px;
        height:     1px;
        padding:    0;
        margin:     -1px;
        overflow:   hidden;
        clip:       rect(0, 0, 0, 0);
        white-space:nowrap;
        border:     0;
    }

    /* Text color utilities for dark surfaces */
    .text-inverse { color: var(--color-dark-text); }
    .text-muted   { color: var(--color-text-muted); }

    /* Scroll lock — toggled by JS classList */
    .scroll-lock {
        position:   fixed;
        top:        0;
        left:       0;
        right:      0;
        overflow-y: scroll;
    }

    /* JS visibility toggle — no inline styles needed */
    .is-hidden {
        display: none;
    }

    /* Text alignment */
    .text-center { text-align: center; }
    .text-left   { text-align: left; }
    .text-right  { text-align: right; }

    /* Text wrapping */
    .text-balance { text-wrap: balance; }
    .text-pretty  { text-wrap: pretty; }

    /* Truncate — single line with ellipsis */
    .truncate {
        overflow:      hidden;
        text-overflow: ellipsis;
        white-space:   nowrap;
    }

    /* Flame gradient text — brand accent treatment */
    .text-flame {
        background:              var(--gradient-flame-text);
        -webkit-background-clip: text;
        background-clip:         text;
        -webkit-text-fill-color: transparent;
        color:                   transparent;
    }

    /* Aspect ratio utilities — for responsive media */
    .aspect-video  { aspect-ratio: 16 / 9; }
    .aspect-square { aspect-ratio: 1; }
    .aspect-photo  { aspect-ratio: 4 / 3; }

    /* Object fit for images inside aspect containers */
    .cover {
        width:      100%;
        height:     100%;
        object-fit: cover;
    }
}

/* ============================================================
   ACCESSIBILITY MEDIA QUERIES
   Outside @layer — these override everything when active.
   ============================================================ */

/* High contrast — increase borders + text weight for users
   who request more contrast via OS settings.               */
@media (prefers-contrast: more) {
    :root {
        --color-border:         oklch(60% 0.01 250);
        --color-text-secondary: oklch(30% 0.01 250);
        --color-text-muted:     oklch(40% 0.01 250);
    }
}

/* Windows High Contrast Mode — ensure interactive elements
   are visible using system colors. CSS custom properties and
   oklch() may not render in forced-colors mode.             */
@media (forced-colors: active) {
    a, button, input, select, textarea {
        border: 1px solid ButtonText;
    }

    :focus-visible {
        outline: 3px solid Highlight;
    }

    ::selection {
        background: Highlight;
        color:      HighlightText;
    }
}