/* ============================================================
   Layer 1: sRGB custom properties — universal fallback
   These work in every browser, including legacy ones.
   ============================================================ */
:root {
    /* Primary (cyan-blue) */
    --color-primary:        #06b6d4;
    --color-primary-hover:  #0891b2;
    --color-primary-light:  #22d3ee;

    /* Navigation */
    --color-nav-bg: #0f172a;

    /* Surfaces */
    --color-surface:        #ffffff;
    --color-surface-subtle: #f8fafc;

    /* Borders */
    --color-border: #e5e7eb;

    /* Text */
    --color-text-muted:    #64748b;
    --color-text-subdued:  #475569;

    /* Semantic: error */
    --color-error-bg:   #fee2e2;
    --color-error-text: #991b1b;

    /* Semantic: success */
    --color-success-bg:   #dcfce7;
    --color-success-text: #166534;
}

/* ============================================================
   Layer 2: OKLCH override — Radix-calibrated values (oklch.fyi)
   Supported in all modern browsers (Chrome 111+, Firefox 113+,
   Safari 15.4+). Perceptually uniform, no hue shift across
   lightness levels.
   ============================================================ */
@supports (color: oklch(0 0 0)) {
    :root {
        /* Cyan palette — hue 210° (oklch.fyi/color-palettes/cyan) */
        --color-primary:       oklch(0.623 0.178 210); /* cyan-9  */
        --color-primary-hover: oklch(0.579 0.179 210); /* cyan-10 */
        --color-primary-light: oklch(0.762 0.153 210); /* cyan-8  */

        /* Dark navy navbar — consistent with slate hue 255° */
        --color-nav-bg: oklch(0.22 0.045 255);

        /* Slate palette — hue 256° (oklch.fyi/color-palettes/slate) */
        --color-surface:        oklch(1 0 0);
        --color-surface-subtle: oklch(0.982 0.002 256); /* slate-2  */
        --color-border:         oklch(0.914 0.008 256); /* slate-5  */
        --color-text-muted:     oklch(0.601 0.02 256);  /* slate-10 */
        --color-text-subdued:   oklch(0.378 0.016 256); /* slate-12 */

        /* Red palette — hue 17° (oklch.fyi/color-palettes/red) */
        --color-error-bg:   oklch(0.965 0.036 17); /* red-3  */
        --color-error-text: oklch(0.49 0.155 17);  /* red-11 */

        /* Green palette — hue 145° (oklch.fyi/color-palettes/green) */
        --color-success-bg:   oklch(0.956 0.042 145); /* green-3  */
        --color-success-text: oklch(0.464 0.143 145); /* green-11 */
    }

    /* ============================================================
       Layer 3: Display P3 wide-gamut boost
       Pushes cyan chroma ~25% beyond sRGB limits on Apple/Samsung
       wide-gamut displays — noticeably more vivid blues.
       Only primary action colors get the boost; semantic and
       neutral tokens don't meaningfully benefit from it.
       ============================================================ */
    @media (color-gamut: p3) {
        :root {
            --color-primary:       oklch(0.623 0.22 210);
            --color-primary-hover: oklch(0.579 0.23 210);
            --color-primary-light: oklch(0.762 0.20 210);
            --color-nav-bg:        oklch(0.20 0.058 255);
        }
    }
}

/* ============================================================
   Base reset & typography
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-surface);
    color: var(--color-text-subdued);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}