/* Krul.nu design system: fonts, primitive scales and semantic tokens. Dark is the default; light applies
   under [data-theme="light"] (theme-init.js stamps it) or, on a page that sets no data-theme, the OS preference. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
}

:root {
    color-scheme: dark;

    --iris-300: #a6a4fc;
    --iris-400: #7e79f7;
    --iris-500: #5d54ec;
    --iris-600: #4a3dd8;

    --regal-400: #bf7bff;
    --regal-500: #a54eff;
    --regal-600: #8f33ec;

    --slate-0:   #ffffff;
    --slate-25:  #fbfbfd;
    --slate-50:  #f6f7fb;
    --slate-100: #eceef5;
    --slate-200: #dde0ed;
    --slate-300: #c3c8dc;
    --slate-400: #9ba2bf;
    --slate-500: #727a9c;
    --slate-700: #3d4361;
    --slate-800: #272b44;
    --slate-900: #191c31;
    --slate-950: #0f111f;

    --blonde-400: #f4b84a;

    --success-500: #22c17a;
    --success-700: #178a57;
    --warning-500: #f5a524;
    --danger-500:  #ef4444;
    --danger-700:  #b91c1c;

    --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;

    --bg:          var(--slate-950);
    --bg-raised:   var(--slate-900);
    --bg-sunken:   #0b0d18;
    --bg-hover:    var(--slate-800);

    --fg-1:        var(--slate-50);
    --fg-2:        var(--slate-300);
    --fg-3:        var(--slate-400);
    --fg-on-brand: var(--slate-0);

    --border-subtle: rgba(255,255,255,0.06);
    --border:        rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.18);
    --border-focus:  var(--iris-400);

    --brand:         var(--iris-400);
    --brand-hover:   var(--iris-300);
    --link:          var(--iris-300);
    --danger:        var(--danger-500);

    --shadow-xs:    0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:    0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
    --shadow-lg:    0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.6);
    --shadow-focus: 0 0 0 3px rgba(126, 121, 247, 0.35);
}

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

    --bg:          var(--slate-25);
    --bg-raised:   var(--slate-0);
    --bg-sunken:   var(--slate-50);
    --bg-hover:    var(--slate-100);

    --fg-1:        var(--slate-900);
    --fg-2:        var(--slate-700);
    --fg-3:        var(--slate-500);

    --border-subtle: var(--slate-100);
    --border:        var(--slate-200);
    --border-strong: var(--slate-300);
    --border-focus:  var(--iris-500);

    --brand:         var(--iris-500);
    --brand-hover:   var(--iris-600);
    --link:          var(--iris-600);
    --danger:        var(--danger-700);

    --shadow-xs:    0 1px 2px rgba(25, 28, 49, 0.06);
    --shadow-md:    0 2px 4px rgba(25, 28, 49, 0.06), 0 4px 8px rgba(25, 28, 49, 0.08);
    --shadow-lg:    0 4px 8px rgba(25, 28, 49, 0.08), 0 12px 24px rgba(25, 28, 49, 0.10);
    --shadow-focus: 0 0 0 3px rgba(93, 84, 236, 0.25);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;

        --bg:          var(--slate-25);
        --bg-raised:   var(--slate-0);
        --bg-sunken:   var(--slate-50);
        --bg-hover:    var(--slate-100);

        --fg-1:        var(--slate-900);
        --fg-2:        var(--slate-700);
        --fg-3:        var(--slate-500);

        --border-subtle: var(--slate-100);
        --border:        var(--slate-200);
        --border-strong: var(--slate-300);
        --border-focus:  var(--iris-500);

        --brand:         var(--iris-500);
        --brand-hover:   var(--iris-600);
        --link:          var(--iris-600);
        --danger:        var(--danger-700);

        --shadow-xs:    0 1px 2px rgba(25, 28, 49, 0.06);
        --shadow-md:    0 2px 4px rgba(25, 28, 49, 0.06), 0 4px 8px rgba(25, 28, 49, 0.08);
        --shadow-lg:    0 4px 8px rgba(25, 28, 49, 0.08), 0 12px 24px rgba(25, 28, 49, 0.10);
        --shadow-focus: 0 0 0 3px rgba(93, 84, 236, 0.25);
    }
}