/* ============================================================================
   app-theme.css — the single theme file for the Quran web client.
   Every colour lives here, as CSS custom properties, with a light and a dark
   set. Values are taken verbatim from the design mock (.ai/tmp/mock/Main.dc.html).

   Light is the default; dark overrides under [data-app-theme="dark"] (the layout
   sets that attribute on <body>). The legacy --b-* tokens used by the existing
   page stylesheets are derived from the new tokens, so untouched pages inherit
   the new palette for free.
   ============================================================================ */

/* ── Light (default) ─────────────────────────────────────────────────────── */
:root {
    --bg: #F4F6F3;
    --surface: #FFFFFF;
    --surface2: #E8EDE9;
    --border: #E0E6E2;
    --text: #14211E;
    --muted: #55665F;
    --accent: #0B5D55;
    --soft: #E1EEEA;
    --ink: #FFFFFF;
    --gold: #F2BE5A;
    --goldtext: #A8730F;
    --heart: #C93B4B;
    --hit: rgba(242, 190, 90, 0.5);
    --hero: #0B5D55;
    --shadow: 0 12px 32px rgba(20, 33, 30, 0.18);

    /* Semantic status colours (kept from the previous palette). */
    --b-danger: #C93B4B;
    --b-success: #2E9E6B;
    --b-warning: #B8860B;

    /* ── Legacy token bridge ───────────────────────────────────────────────── */
    --b-sidebar-bg: var(--surface);
    --b-bg: var(--bg);
    --b-surface: var(--surface);
    --b-surface-2: var(--surface2);
    --b-surface-3: #D8DFDA;
    --b-accent: var(--accent);
    --b-accent-dim: var(--soft);
    --b-accent-glow: var(--soft);
    --b-text: var(--text);
    --b-text-2: var(--muted);
    --b-text-3: var(--muted);
    --b-border: var(--border);

    /* Neutral palettes kept for compatibility. */
    --color-primary-500: var(--accent);
    --color-primary-700: var(--accent);

    --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
[data-app-theme="dark"] {
    --bg: #0D1614;
    --surface: #14201C;
    --surface2: #1C2A25;
    --border: #26352F;
    --text: #EEF1EA;
    --muted: #9CB0A8;
    --accent: #5ED3B0;
    --soft: rgba(94, 211, 176, 0.16);
    --ink: #04231A;
    --gold: #E8BD65;
    --goldtext: #E8BD65;
    --heart: #F4727F;
    --hit: rgba(232, 189, 101, 0.3);
    --hero: #0B5D55;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);

    --b-sidebar-bg: var(--surface);
    --b-bg: var(--bg);
    --b-surface: var(--surface);
    --b-surface-2: var(--surface2);
    --b-surface-3: #2A3833;
    --b-accent: var(--accent);
    --b-accent-dim: var(--soft);
    --b-accent-glow: var(--soft);
    --b-text: var(--text);
    --b-text-2: var(--muted);
    --b-text-3: var(--muted);
    --b-border: var(--border);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html,
body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
}

.app-layout {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
}

.app-layout input,
.app-layout select,
.app-layout textarea {
    font-family: inherit;
    color: var(--text);
}

/* Buttons keep their own colour: component rules (.btn, .segbtn, .act, .iconbtn, …) must win,
   so this reset uses element specificity and inherits instead of forcing --text. */
button {
    font-family: inherit;
    color: inherit;
}

.app-layout :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Blazor's <FocusOnNavigate Selector="h1" /> focuses the page heading for screen readers.
   That programmatic focus also matched :focus-visible and painted a stray accent line under
   the title, so suppress the ring on the navigation target only (it stays keyboard-reachable). */
.app-layout [tabindex="-1"]:focus-visible {
    outline: none;
}

/* Text fields inside a search field show focus on the wrapper border, not an inner box. */
.app-layout .sidesearch input:focus-visible,
.app-layout .sfield input:focus-visible {
    outline: none;
}