/* ==========================================================================
   Clarifolio design tokens — the single source of truth for every color,
   border, radius, shadow and typeface in Landing, App and Admin.

   Rules (also in BRANDING.md, part 2):
   - Raw palette values (hex) live ONLY in this file, in the "Palette" block.
     --ink and --paper are palette values too: nothing outside this file may
     reference them, or any other palette token, directly.
   - Components read semantic tokens only: --bg, --surface, --fg, --fg-muted,
     --border-color, --shadow-color, --highlight-bg/-fg, --accent/-ink,
     --positive/--negative/--warning/--income, and the dimension tokens.
   - --accent is a fill color (buttons, active nav, badges). Never use it as
     text on --bg/--surface: most presets are too light for that in light mode.
   - Changing --accent (or the dev-only data-accent preset) restyles all three
     sites; --accent-ink is the text color on an --accent fill and is chosen
     per preset for contrast (Clarifolio.Tests/UI/TokenContrastTests enforce
     >= 4.5:1 for every preset and every semantic color in both modes).

   Structure: :root = light. Dark is applied by the OS preference unless the
   visitor chose light, or by an explicit data-theme="dark" (server-rendered
   from the cf-theme cookie — see Theming/ThemePreference.cs).
   ========================================================================== */

:root {
    /* ---- Palette (raw values; referenced only inside this file) ---------- */
    --ink: #000000;
    --paper: #FFFFFF;

    --off-white-50: #FCFBF8;
    --off-white-100: #F4F2EC;
    --stone-600: #57544D;

    --gray-950: #0E0E0E;
    --gray-900: #1A1A1A;
    --gray-400: #A6A6A6;
    --gray-100: #F2F2F2;

    --green-700: #0B7A3B;
    --red-700: #C01530;
    --orange-800: #A33F00;
    --gold-800: #7D5E00;

    --green-300: #4ADE80;
    --red-300: #FF7B7B;
    --orange-300: #FFA45C;
    --gold-300: #F5CF4E;

    --preset-pink: #FF6BB5;
    --preset-yellow: #FFD23F;
    --preset-lime: #B8F04A;
    --preset-sky: #5BC8FF;
    --preset-orange: #FF8A3D;

    /* ---- Accent (same in both modes) ------------------------------------- */
    --accent: var(--preset-pink);
    --accent-ink: var(--ink);

    /* ---- Semantic colors: light mode ------------------------------------- */
    color-scheme: light;
    --bg: var(--off-white-100);
    --surface: var(--off-white-50);
    --fg: var(--ink);
    --fg-muted: var(--stone-600);
    --border-color: var(--ink);
    --shadow-color: var(--ink);
    --highlight-bg: var(--ink);
    --highlight-fg: var(--paper);

    --positive: var(--green-700);
    --negative: var(--red-700);
    --warning: var(--orange-800);
    --income: var(--gold-800);
    --negative-ink: var(--paper);   /* text on a --negative fill (danger button) */
    --positive-ink: var(--paper);   /* text/icon on a --positive fill */
    --cta-shadow-color: var(--ink); /* shadow under solid-ink CTAs (.btn-ink) */

    /* Dark-mode shadow source. One-token option: set this to var(--accent)
       to make dark-mode offset shadows accent-colored instead of off-white. */
    --shadow-tint: var(--gray-100);

    /* ---- Dimensions ------------------------------------------------------ */
    --border-width: 3px;
    --border-width-subtle: 2px;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    --shadow-x: 6px;
    --shadow-y: 6px;
    --shadow-sm: 3px;
    --shadow-xs: 2px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --container-width: 1200px;
    --rail-width: 248px;

    /* ---- Typography ------------------------------------------------------ */
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --tracking-display: -0.04em;
    --weight-display: 700;

    /* ---- Motion ---------------------------------------------------------- */
    --press-duration: 90ms;
    --press-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---- Derived tokens (composites of the semantic tokens above; resolve
        per mode automatically because they only reference semantic tokens) */
:root {
    --border: var(--border-width) solid var(--border-color);
    --border-subtle: var(--border-width-subtle) solid var(--border-color);
    --divider-color: color-mix(in srgb, var(--fg) 14%, var(--surface));
    --divider: 1px solid var(--divider-color);

    --shadow: var(--shadow-x) var(--shadow-y) 0 0 var(--shadow-color);
    --shadow-small: var(--shadow-sm) var(--shadow-sm) 0 0 var(--shadow-color);
    --shadow-pressed: 0 0 0 0 var(--shadow-color);

    --positive-soft: color-mix(in srgb, var(--positive) 14%, var(--surface));
    --negative-soft: color-mix(in srgb, var(--negative) 14%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--warning) 16%, var(--surface));
    --income-soft: color-mix(in srgb, var(--income) 16%, var(--surface));
    --fg-soft: color-mix(in srgb, var(--fg) 7%, var(--surface));
    --pattern-line: color-mix(in srgb, var(--fg) 6%, transparent);        /* ledger-line backgrounds */
    --pattern-line-strong: color-mix(in srgb, var(--fg) 12%, transparent);

    --overlay: color-mix(in srgb, var(--gray-950) 55%, transparent);
    --focus-color: var(--fg);
}

/* ---- Dark mode: OS preference (unless the visitor explicitly chose light) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: var(--gray-950);
        --surface: var(--gray-900);
        --fg: var(--gray-100);
        --fg-muted: var(--gray-400);
        --border-color: var(--gray-100);
        --shadow-color: var(--shadow-tint);
        --highlight-bg: var(--paper);
        --highlight-fg: var(--ink);

        --positive: var(--green-300);
        --negative: var(--red-300);
        --warning: var(--orange-300);
        --income: var(--gold-300);
        --negative-ink: var(--ink);
        --positive-ink: var(--ink);
        --cta-shadow-color: var(--accent);

        --overlay: color-mix(in srgb, var(--ink) 72%, transparent);
    }
}

/* ---- Dark mode: explicit choice (identical mapping to the block above) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--gray-950);
    --surface: var(--gray-900);
    --fg: var(--gray-100);
    --fg-muted: var(--gray-400);
    --border-color: var(--gray-100);
    --shadow-color: var(--shadow-tint);
    --highlight-bg: var(--paper);
    --highlight-fg: var(--ink);

    --positive: var(--green-300);
    --negative: var(--red-300);
    --warning: var(--orange-300);
    --income: var(--gold-300);
    --negative-ink: var(--ink);
    --positive-ink: var(--ink);
    --cta-shadow-color: var(--accent);

    --overlay: color-mix(in srgb, var(--ink) 72%, transparent);
}

/* ---- Accent presets (dev accent switcher; data-accent is only ever
        rendered in Development — see HtmlThemeTagHelper). Each preset names
        its own --accent-ink, picked for >= 4.5:1 contrast on the fill. */
:root[data-accent="pink"]   { --accent: var(--preset-pink);   --accent-ink: var(--ink); }
:root[data-accent="yellow"] { --accent: var(--preset-yellow); --accent-ink: var(--ink); }
:root[data-accent="lime"]   { --accent: var(--preset-lime);   --accent-ink: var(--ink); }
:root[data-accent="sky"]    { --accent: var(--preset-sky);    --accent-ink: var(--ink); }
:root[data-accent="orange"] { --accent: var(--preset-orange); --accent-ink: var(--ink); }

/* Accent swatches (Settings → Accent picker, and the dev-only switcher) — the
   one UI rule in this file, because it is the one place that has to show the
   raw preset colors themselves. */
[data-accent-swatch="pink"]   { background: var(--preset-pink); }
[data-accent-swatch="yellow"] { background: var(--preset-yellow); }
[data-accent-swatch="lime"]   { background: var(--preset-lime); }
[data-accent-swatch="sky"]    { background: var(--preset-sky); }
[data-accent-swatch="orange"] { background: var(--preset-orange); }