/*
    urhema_theme.css — the three themes (Phase 0, corrected)

    SUPERSEDES an earlier draft using --color-* names. See urhema.tokens.css
    for the full explanation of the naming correction.

    One marker, matching Master.cshtml's server-rendered <html data-theme="...">:
    [data-theme="light|dark|sepia"]. Each block below fully redefines every
    theme-dependent token — no partial overrides, so nothing can silently
    inherit the wrong theme's value for whatever got left out.

    Two things carried over exactly from the prototype's proven palette,
    worth calling out because they're easy to get wrong by "simplifying":

    1. Sepia's accent is NOT the same coral used in light/dark (#FF563C).
       It's its own muted brick-red (#C84B31) — chosen in the prototype
       specifically to sit better against a warm parchment background.
       Reusing the coral in sepia would look cold/mismatched against it.

    2. Dark theme's accent-emphasis shade goes LIGHTER than the base
       accent (#FF7661, not darker) — because "darker" reads as *less*
       visible against a black background, while it reads as more
       emphatic against white/parchment. Light/sepia go darker for hover,
       dark goes lighter. This is intentional, not a mistake to "fix" into
       a single direction.
*/

/* ============ LIGHT (default) ============ */
[data-theme="light"] {
    --ub-paper: #FAFAFA;
    --ub-paper-sunken: #F3F4F6;
    --ub-paper-raised: #FFFFFF;

    --ub-ink: #111827;
    --ub-ink-soft: #4B5563;
    --ub-ink-muted: #5B6472;

    --ub-line: #E5E7EB;
    --ub-line-strong: #D1D5DB;
    --ub-rule: 1px solid var(--ub-line);
    --ub-rule-strong: 1px solid var(--ub-line-strong);

    --ub-accent-100: #FFE0D9;
    --ub-accent-500: #FF563C;
    --ub-accent-700: #E04A32;

    /* Danger/error — a genuinely different hue (true red, ~0-4°) from the coral brand
       accent (~9-10°) on purpose, so a validation error never reads as the same signal
       as a CTA/Premium/brand accent. WCAG-verified against this theme's paper: see
       chat/WIRING for the full contrast table across all four themes. */
    --ub-danger-500: #DC2626;
    --ub-danger-700: #B91C1C;
    --ub-accent-contrast: #FFFFFF;

    --ub-focus-ring: 0 0 0 3px rgba(255, 86, 60, 0.35);
    --ub-shadow-float: 0 12px 30px -8px rgba(17, 24, 39, 0.16);
    --ub-shadow-soft: 0 4px 20px -2px rgba(17, 24, 39, 0.05);
    --ub-hatch: repeating-linear-gradient(135deg, #f3f4f6 0 10px, #e5e7eb 10px 20px);
}

/* ============ DARK (true midnight, #000000) ============ */
[data-theme="dark"] {
    --ub-paper: #000000;
    --ub-paper-sunken: #171717;
    --ub-paper-raised: #121212;

    --ub-ink: #F3F4F6;
    --ub-ink-soft: #9CA3AF;
    --ub-ink-muted: #8B93A1;

    --ub-line: #262626;
    --ub-line-strong: #3A3A3A;
    --ub-rule: 1px solid var(--ub-line);
    --ub-rule-strong: 1px solid var(--ub-line-strong);

    --ub-accent-100: #3D1810;
    --ub-accent-500: #FF563C;
    --ub-accent-700: #FF7661;

    /* Dark theme emphasis goes LIGHTER, matching the same rule --ub-accent-700 already
       follows here (lighter reads as more emphatic on a dark ground). */
    --ub-danger-500: #F87171;
    --ub-danger-700: #FCA5A5;
    --ub-accent-contrast: #FFFFFF;

    --ub-focus-ring: 0 0 0 3px rgba(255, 86, 60, 0.45);
    --ub-shadow-float: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 86, 60, 0.08);
    --ub-shadow-soft: 0 6px 24px -4px rgba(0, 0, 0, 0.55);
    --ub-hatch: repeating-linear-gradient(135deg, #1f1f1f 0 10px, #121212 10px 20px);
}

/* ============ SEPIA (warm reading theme) ============ */
[data-theme="sepia"] {
    --ub-paper: #FBF0D9;
    --ub-paper-sunken: #EAD8B0;
    --ub-paper-raised: #F7E9CC;

    --ub-ink: #2C221E;
    --ub-ink-soft: #5F4B42;
    --ub-ink-muted: #7A6055;

    --ub-line: #E2D0AC;
    --ub-line-strong: #D4BC90;
    --ub-rule: 1px solid var(--ub-line);
    --ub-rule-strong: 1px solid var(--ub-line-strong);

    /* Sepia's own accent family — see file header note. Not on the brand ramp. */
    --ub-accent-100: #F0D5C8;
    --ub-accent-500: #C84B31;
    --ub-accent-700: #A93B23;

    --ub-danger-500: #C0362A;
    --ub-danger-700: #96281E;
    --ub-accent-contrast: #FFFFFF;

    --ub-focus-ring: 0 0 0 3px rgba(200, 75, 49, 0.35);
    --ub-shadow-float: 0 12px 28px -8px rgba(44, 34, 30, 0.20);
    --ub-shadow-soft: 0 4px 18px -3px rgba(44, 34, 30, 0.08);
    --ub-hatch: repeating-linear-gradient(135deg, #eaddc5 0 10px, #decfae 10px 20px);
}

/* ============ NIGHT (low-light dusk — warm-shifted) ============ */
[data-theme="night"] {
    --ub-paper: #16130E;
    --ub-paper-sunken: #100D09;
    --ub-paper-raised: #201B14;

    --ub-ink: #ECE3D6;
    --ub-ink-soft: #B8AC9A;
    --ub-ink-muted: #94897A;

    --ub-line: #2A241B;
    --ub-line-strong: #3E362A;
    --ub-rule: 1px solid var(--ub-line);
    --ub-rule-strong: 1px solid var(--ub-line-strong);

    /* Warm-shifted coral (base coral is #FF563C). Emphasis goes LIGHTER, matching
       dark's logic — a lighter shade reads as more emphatic against a dark ground. */
    --ub-accent-100: #3A1C12;
    --ub-accent-500: #FF6B4A;
    --ub-accent-700: #FF8566;

    /* Same lighter-for-emphasis logic as dark — night is also a low-light ground. */
    --ub-danger-500: #F0776A;
    --ub-danger-700: #F5978C;
    --ub-accent-contrast: #FFFFFF;

    --ub-focus-ring: 0 0 0 3px rgba(255, 107, 74, 0.45);
    --ub-shadow-float: 0 16px 36px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 107, 74, 0.08);
    --ub-shadow-soft: 0 6px 24px -4px rgba(0, 0, 0, 0.5);
    --ub-hatch: repeating-linear-gradient(135deg, #221c14 0 10px, #16130e 10px 20px);
}