/*
 * Cipher Workbench theme foundation.
 * Adapted from /home/andy/src/newtheme/assets/css/theme.css so the public and
 * authenticated surfaces share Panopticon's navy, blue, cyan and soft-card
 * visual language. Washi remains the structural utility layer underneath.
 */

:root {
    --theme-navy: #071c33;
    --theme-navy-soft: #124c77;
    --theme-blue: #0c78c9;
    --theme-blue-hover: #0967ad;
    --theme-cyan: #22b8cf;
    --theme-green: #2fb344;
    --theme-amber: #f59f00;
    --theme-red: #d63939;
    --theme-grey: #98a2b3;
    --theme-ink: #172b4d;
    --theme-muted: #66788a;
    --theme-line: #dfe7ef;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f9fbfd;
    --theme-background: #f3f6fa;
    --theme-radius: 12px;
    --theme-shadow: 0 8px 25px rgba(23, 43, 77, 0.045);
    --theme-shadow-raised: 0 13px 30px rgba(23, 43, 77, 0.08);

    /* Map the Washi utility framework onto the reference palette. */
    --paper: var(--theme-background);
    --paper-2: var(--theme-surface-soft);
    --paper-3: #f4f8fb;
    --card: var(--theme-surface);
    --ink: var(--theme-ink);
    --ink-2: var(--theme-muted);
    --muted: #75879a;
    --line: var(--theme-line);
    --accent: var(--theme-blue);
    --accent-2: var(--theme-blue-hover);
    --accent-soft: rgba(12, 120, 201, 0.1);
    --jade: var(--theme-green);
    --jade-soft: rgba(47, 179, 68, 0.1);
    --gold: var(--theme-amber);
    --gold-2: #d88700;
    --gold-soft: rgba(245, 159, 0, 0.12);
    --murasaki: var(--theme-blue);
    --murasaki-2: var(--theme-blue-hover);
    --murasaki-soft: rgba(12, 120, 201, 0.1);
    --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: var(--font-body);
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

[data-theme="sumi"] {
    color-scheme: dark;
    --theme-navy: #e9f5ff;
    --theme-navy-soft: #9dd9ff;
    --theme-blue: #4ab3f4;
    --theme-blue-hover: #73c6f7;
    --theme-cyan: #52d0e3;
    --theme-green: #57c96a;
    --theme-amber: #f7b733;
    --theme-red: #f06a6a;
    --theme-grey: #8697aa;
    --theme-ink: #e7f0f8;
    --theme-muted: #9eb0c1;
    --theme-line: #294158;
    --theme-surface: #10273c;
    --theme-surface-soft: #0c2236;
    --theme-background: #071a2b;
    --theme-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    --theme-shadow-raised: 0 13px 30px rgba(0, 0, 0, 0.28);

    --paper: var(--theme-background);
    --paper-2: var(--theme-surface-soft);
    --paper-3: #0a2033;
    --card: var(--theme-surface);
    --ink: var(--theme-ink);
    --ink-2: var(--theme-muted);
    --muted: #8da0b2;
    --line: var(--theme-line);
    --accent: var(--theme-blue);
    --accent-2: var(--theme-blue-hover);
    --accent-soft: rgba(74, 179, 244, 0.14);
    --jade: var(--theme-green);
    --jade-soft: rgba(87, 201, 106, 0.13);
    --gold: var(--theme-amber);
    --gold-2: #e49c19;
    --gold-soft: rgba(247, 183, 51, 0.14);
    --murasaki: var(--theme-blue);
    --murasaki-2: var(--theme-blue-hover);
    --murasaki-soft: rgba(74, 179, 244, 0.14);
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 90% -10%, rgba(34, 184, 207, 0.13) 0, transparent 30rem),
        var(--theme-background);
}

a {
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 3px solid rgba(12, 120, 201, 0.3);
    outline-offset: 2px;
}

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