/* ==========================================================================
   PersonalizedComics — design tokens ("fresh off the press")
   Shared by every page. Marketing + app. Keep this file tiny and boring.
   ========================================================================== */
:root {
    color-scheme: light;

    /* ink & paper */
    --ink: #14161A;
    --ink-soft: #3A3D45;
    --muted: #5E6270;
    --paper: #FFFFFF;
    --newsprint: #F6F1E7;
    --newsprint-deep: #EDE6D6;
    --rule: #E3DED3;

    /* color */
    --cobalt: #2E4BFF;
    --cobalt-deep: #1B33D6;
    --cobalt-tint: #E9EDFF;
    --sun: #FFC42E;
    --sun-tint: #FFF3CC;
    --kapow: #FF3D2E;
    --kapow-tint: #FFE4E1;
    --good: #0B7A3B;
    --good-tint: #E3F5EA;
    --warn: #B45309;
    --warn-tint: #FFF1DB;

    /* text roles */
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-muted: var(--muted);
    --on-accent: #FFFFFF;

    /* type */
    --font-display: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
    --font-body: "Rubik", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-sticker: "Lilita One", "Arial Black", Impact, sans-serif;
    --font-hand: "Kalam", "Comic Sans MS", cursive;

    /* shape */
    --border: 2.5px solid var(--ink);
    --border-w: 2.5px;
    --shadow-sm: 3px 3px 0 var(--ink);
    --shadow: 5px 5px 0 var(--ink);
    --shadow-lg: 8px 8px 0 var(--ink);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --pill: 999px;

    /* layout */
    --maxw: 1160px;
    --nav-h: 72px;
    --gutter: 1.5rem;

    /* ---- legacy aliases: the old dark theme's variable names, remapped
       to paper so pages that still use them render correctly ---- */
    --black: var(--newsprint);
    --dark: var(--paper);
    --panel: var(--paper);
    --panel-hover: var(--newsprint);
    --accent: var(--cobalt);
    --accent-hover: var(--cobalt-deep);
    --yellow: var(--sun);
    --cyan: var(--cobalt-deep);
    --green: var(--good);
    --white: var(--ink);          /* was "text on dark"; now ink on paper */
    --gray: var(--muted);
    --gray-light: var(--ink-soft);
    --input-bg: var(--paper);
    --input-border: var(--rule);
    --border-color: var(--rule);
}