/* ==========================================================================
   Shared design tokens.

   Loaded FIRST on every screen, before auth.css / app.css / blog.css, so the
   sign-in page and the admin panel cannot drift apart. Nothing in here emits
   rules — it only declares custom properties.
   ========================================================================== */

:root {
    /* --- type ----------------------------------------------------------- */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* --- surfaces (warm paper, not cool grey) --------------------------- */
    --paper: #f7f6f3;
    --paper-2: #fffefc;
    --paper-3: #f1efea;

    /* --- ink ------------------------------------------------------------ */
    --ink: #15171c;
    --ink-2: #3f444e;
    --ink-3: #767c88;
    --ink-4: #a8adb7;

    /* --- rules ---------------------------------------------------------- */
    --line: #e0ddd6;
    --line-2: #cbc7be;

    /* --- accent: teal, used for focus and active state only ------------- */
    --accent: #0f6f64;
    --accent-2: #0b5850;
    --accent-soft: #e7f2f0;
    --accent-ring: rgba(15, 111, 100, .16);

    /* --- status --------------------------------------------------------- */
    --bad: #b4342b;
    --bad-soft: #fdeeec;
    --bad-line: #f0c4bf;

    --ok: #176b45;
    --ok-soft: #e9f5ee;
    --ok-line: #bfe0cc;

    --warn: #8a6320;
    --warn-soft: #fdf8ec;
    --warn-line: #e3c88a;

    --info: #2b4d8f;
    --info-soft: #eef2fb;
    --info-line: #c3d0ea;

    /* --- geometry ------------------------------------------------------- */
    --r-sm: 7px;
    --r: 11px;
    --r-lg: 15px;

    --shadow-1: 0 1px 2px rgba(21, 23, 28, .05);
    --shadow-2: 0 1px 2px rgba(21, 23, 28, .04), 0 10px 30px -12px rgba(21, 23, 28, .14);
    --shadow-3: 0 1px 2px rgba(21, 23, 28, .04), 0 20px 52px -14px rgba(21, 23, 28, .24);

    /* --- shell dimensions ---------------------------------------------- */
    --sidebar-w: 244px;
    --sidebar-w-rail: 68px;
    --topbar-h: 58px;
}

/*
 * Dark is opt-in only, never automatic.
 *
 * This used to sit behind @media (prefers-color-scheme: dark), which meant
 * anyone whose OS was set to dark got a dark panel with no way out. The theme
 * is now driven by data-theme on <html>, set from the topbar switch and
 * remembered in localStorage. Light is the default for everyone.
 */
:root[data-theme="dark"] {
    --paper: #0e1014;
    --paper-2: #16191f;
    --paper-3: #1c2027;

    --ink: #f2f1ee;
    --ink-2: #c3c7cf;
    --ink-3: #8b9199;
    --ink-4: #5f656e;

    --line: #262b33;
    --line-2: #363d47;

    --accent: #4ec5b5;
    --accent-2: #6ad3c4;
    --accent-soft: #10231f;
    --accent-ring: rgba(78, 197, 181, .2);

    --bad: #f0918a;
    --bad-soft: #241715;
    --bad-line: #4a2723;

    --ok: #7cc79c;
    --ok-soft: #12211a;
    --ok-line: #24402f;

    --warn: #d8b76a;
    --warn-soft: #1c1810;
    --warn-line: #4a3c1c;

    --info: #9db8e8;
    --info-soft: #131a28;
    --info-line: #2a3550;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -14px rgba(0, 0, 0, .6);
    --shadow-3: 0 1px 2px rgba(0, 0, 0, .45), 0 24px 60px -16px rgba(0, 0, 0, .7);
}