/* Fonts */
@import "fonts.css";


/* =========================
   Dark-Mode First
========================= */


/* =========================
   CSS Custom Properties
========================= */

:root {
    /* ── Backgrounds ── */
    --bg:               #ffffff;
    --bg-surface:       #f0f1f3;
    --bg-overlay-4:     rgba(255, 255, 255, 0.04);
    --bg-overlay-8:     rgba(255, 255, 255, 0.08);
    --bg-overlay-12:    rgba(255, 255, 255, 0.12);
    --bg-overlay-15:    rgba(255, 255, 255, 0.15);

    /* ── Text (WCAG AAA / AA) ── */
    --text-primary:     #111111;   /* AAA on --bg */
    --text-secondary:   #3d3d3d;   /* AAA on --bg */
    --text-tertiary:    #6b6b6b;   /* AA on --bg  */
    --text-disabled:    #9e9e9e;

    /* ── Primary (Blue ramp) ── */
    --primary-900:      #061b33;
    --primary-800:      #0c3665;
    --primary-700:      #134198;
    --primary-600:      #1c7ae4;
    --primary-500:      #1f87fd;   /* primary color */
    --primary-400:      #62abfe;
    --primary-300:      #a6cffe;
    --primary-100:      #d2e7ff;

    /* ── Secondary (Indigo ramp) ── */
    --secondary-900:    #1e1f4d;
    --secondary-800:    #323480;
    --secondary-700:    #4548b3;
    --secondary-600:    #4f52cc;   /* secondary vibrant */
    --secondary-500:    #6367ff;   /* secondary color */
    --secondary-400:    #7376ff;
    --secondary-300:    #9295ff;
    --secondary-100:    #d0d1ff;

    /* ── UI Tokens ── */
    --nav-hover-bg:     #f0f1f3;
    --border:           rgba(0, 0, 0, 0.10);
    --border-strong:    rgba(0, 0, 0, 0.20);
    --accent:           var(--primary-500);
    --accent-secondary: var(--secondary-500);
}


/* ── Dark Theme ── */

@media (prefers-color-scheme: dark) {
    :root { color-scheme: dark; }
    :root:not([data-theme="light"]) {
        /* Backgrounds */
        --bg:               #000000;
        --bg-surface:       #121212;
        --bg-overlay-4:     rgba(255, 255, 255, 0.04);
        --bg-overlay-8:     rgba(255, 255, 255, 0.08);
        --bg-overlay-12:    rgba(255, 255, 255, 0.12);
        --bg-overlay-15:    rgba(255, 255, 255, 0.15);

        /* Text — AAA ≥ 7:1, AA ≥ 4.5:1 on #000 */
        --text-primary:     #f5f5f5;   /* 18.6:1 — AAA */
        --text-secondary:   #c2c2c2;   /* 11.1:1 — AAA */
        --text-tertiary:    #8a8a8a;   /*  5.0:1 — AA  */
        --text-disabled:    #555555;

        /* Primary — shift to lighter stops on dark bg */
        --primary-900:      #d2e7ff;
        --primary-800:      #a6cffe;
        --primary-700:      #62abfe;
        --primary-600:      #1f87fd;   /* primary color */
        --primary-500:      #1c7ae4;
        --primary-400:      #134198;
        --primary-300:      #0c3665;
        --primary-100:      #061b33;

        /* Secondary — shift to lighter stops on dark bg */
        --secondary-900:    #d0d1ff;
        --secondary-800:    #9295ff;
        --secondary-700:    #7376ff;
        --secondary-600:    #6367ff;   /* secondary color */
        --secondary-500:    #4f52cc;
        --secondary-400:    #4548b3;
        --secondary-300:    #323480;
        --secondary-100:    #1e1f4d;

        /* UI Tokens */
        --nav-hover-bg:     var(--bg-overlay-8);
        --border:           rgba(255, 255, 255, 0.10);
        --border-strong:    rgba(255, 255, 255, 0.20);
    }
}

/* Manual override */
[data-theme="dark"] {
    color-scheme: dark;
    --bg:               #000000;
    --bg-surface:       #121212;
    --bg-overlay-4:     rgba(255, 255, 255, 0.04);
    --bg-overlay-8:     rgba(255, 255, 255, 0.08);
    --bg-overlay-12:    rgba(255, 255, 255, 0.12);
    --bg-overlay-15:    rgba(255, 255, 255, 0.15);
    --text-primary:     #f5f5f5;
    --text-secondary:   #c2c2c2;
    --text-tertiary:    #8a8a8a;
    --text-disabled:    #555555;
    --primary-900:      #d2e7ff;
    --primary-800:      #a6cffe;
    --primary-700:      #62abfe;
    --primary-600:      #1f87fd;
    --primary-500:      #1c7ae4;
    --primary-400:      #134198;
    --primary-300:      #0c3665;
    --primary-100:      #061b33;
    --secondary-900:    #d0d1ff;
    --secondary-800:    #9295ff;
    --secondary-700:    #7376ff;
    --secondary-600:    #6367ff;
    --secondary-500:    #4f52cc;
    --secondary-400:    #4548b3;
    --secondary-300:    #323480;
    --secondary-100:    #1e1f4d;
    --nav-hover-bg:     var(--bg-overlay-8);
    --border:           rgba(255, 255, 255, 0.10);
    --border-strong:    rgba(255, 255, 255, 0.20);
}

[data-theme="light"] {
    color-scheme: light;
}