/* =====================================================================
 * tokens.css  —  Design tokens (single source of truth for color, radius,
 *                shadow, motion, type, layering)
 * ---------------------------------------------------------------------
 * LOADED FROM: App/View/main-base.html, BEFORE {% block css %}.
 *
 * WHY BEFORE THE BLOCK:
 *   - a page-level sheet can override a token for that page only
 *   - the Bootstrap bridge (Stage B) lands after bootstrap.min.css
 * Note the cascade inversion documented in main-base.html does NOT affect
 * tokens: custom properties are inherited values resolved at computed-value
 * time, not at the point the consuming rule was parsed. birth-chart.css may
 * reference var(--brand-600) even though it loads earlier than style.css.
 *
 * ── STAGE A CONTRACT ────────────────────────────────────────────────
 * This file must not change a single pixel. Every value below is copied
 * VERBATIM from style.css / birth-chart.css as they stood at the start of
 * the refactor. Improvements that alter a rendered color (collapsing the
 * 13 alpha steps, merging the two neutral ramps, re-pointing Bootstrap's
 * --bs-* variables) are Stage B and are called out inline.
 *
 * ── THE ALPHA CONVENTION ────────────────────────────────────────────
 * Channel triples are COMMA-separated and consumed with legacy rgba():
 *     background: rgba(var(--brand-rgb), 0.08);
 * Not color-mix() (raises the support floor to Chrome 111 / Safari 16.2
 * and fails with NO graceful degradation - the whole declaration becomes
 * invalid and the property silently vanishes; with no build step we cannot
 * emit a fallback). Not space-separated either: Bootstrap 5.3's own
 * --bs-primary-rgb is comma-separated, and html2canvas 1.4.1 - which
 * generates the PDFs - re-parses some CSS itself and is most reliable with
 * plain rgba().
 *
 * DO NOT add var(--x, fallback) fallbacks during the migration sweep. A
 * fallback masks exactly the typo you want to catch; a mistyped token with
 * no fallback renders `unset`, which is usually visibly wrong.
 * ===================================================================== */

:root {

    /* ── UA color scheme ───────────────────────────────────────────────
     * Ship this even though no dark theme exists. Without it, browsers on
     * a dark system preference render form controls, scrollbars, <select>
     * dropdowns and date pickers in DARK UA chrome against this light
     * page - a live bug, since select2 / sweetalert2 / jQuery UI /
     * daterangepicker all assume light widgets.
     * Stage B (dark mode) becomes: light dark, plus
     *   [data-bs-theme="dark"] { color-scheme: dark; }
     * ---------------------------------------------------------------- */
    color-scheme: light;

    /* ── Brand: teal ──────────────────────────────────────────────────
     * Values in use today: #0d9488 x16, #115e59 x12, #0f766e x6,
     * #134e4a x1, #f0fdfa x1.
     * ---------------------------------------------------------------- */
    --brand-50: #f0fdfa;
    --brand-600: #0d9488;
    /* primary */
    --brand-700: #0f766e;
    /* hover / active */
    --brand-800: #115e59;
    /* headings, gradient end */
    --brand-900: #134e4a;

    /* Channels of --brand-600. KEEP IN SYNC if --brand-600 changes. */
    --brand-rgb: 13, 148, 136;

    /* The 13 alpha steps actually in use, preserved verbatim.
     * Deliberately mechanical names so they read as a migration artifact.
     * STAGE B: collapse to ~5 semantic steps (--brand-tint, --border-brand,
     * --ring-brand, ...). That IS a visual change, hence not here. */
    --brand-a06: rgba(var(--brand-rgb), 0.06);
    --brand-a08: rgba(var(--brand-rgb), 0.08);
    --brand-a10: rgba(var(--brand-rgb), 0.1);
    --brand-a12: rgba(var(--brand-rgb), 0.12);
    --brand-a14: rgba(var(--brand-rgb), 0.14);
    --brand-a15: rgba(var(--brand-rgb), 0.15);
    --brand-a18: rgba(var(--brand-rgb), 0.18);
    --brand-a20: rgba(var(--brand-rgb), 0.2);
    --brand-a25: rgba(var(--brand-rgb), 0.25);
    --brand-a28: rgba(var(--brand-rgb), 0.28);
    --brand-a35: rgba(var(--brand-rgb), 0.35);
    --brand-a40: rgba(var(--brand-rgb), 0.4);
    --brand-a50: rgba(var(--brand-rgb), 0.5);

    --gradient-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);

    /* ── Accent: amber / gold ─────────────────────────────────────── */
    --accent-300: #fde68a;
    --accent-400: #fbbf24;
    --accent-600: #d97706;
    --accent-700: #b45309;
    --accent-800: #92400e;
    --accent-900: #78350f;
    --accent-rgb: 217, 119, 6;
    --accent-a12: rgba(var(--accent-rgb), 0.12);
    --accent-a20: rgba(var(--accent-rgb), 0.2);
    --accent-a30: rgba(var(--accent-rgb), 0.3);

    /* ── Neutrals: slate (canonical) ──────────────────────────────── */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* ── Neutrals: gray (TEMPORARY BRIDGE) ────────────────────────────
     * A second, parallel Tailwind-gray ramp is also in use. Merging the two
     * ramps shifts real pixels, so it is STAGE B. Until then these exist so
     * the sweep can tokenize them without changing them.
     * ---------------------------------------------------------------- */
    --neutral-alt-100: #f3f4f6;
    --neutral-alt-200: #e5e7eb;
    --neutral-alt-300: #d1d5db;
    --neutral-alt-400: #9ca3af;
    --neutral-alt-500: #6b7280;
    --neutral-alt-600: #4b5563;
    --neutral-alt-700: #374151;

    --white: #fff;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;

    /* ── Semantic surfaces & ink ──────────────────────────────────── */
    --surface-page: var(--neutral-50);
    /* body */
    --surface-card: var(--white);
    --surface-muted: var(--neutral-100);
    --surface-paper: #fffdf8;
    /* warm card ground */

    --ink: var(--neutral-900);
    --ink-body: var(--neutral-800);
    --ink-muted: var(--neutral-600);
    --ink-subtle: var(--neutral-500);
    --ink-faint: var(--neutral-400);
    --ink-on-brand: var(--white);

    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --border-hair: rgba(var(--black-rgb), 0.08);
    --border-brand: var(--brand-a35);
    --border-brand-soft: var(--brand-a18);

    /* ── Ranked tiers ─────────────────────────────────────────────────
     * Ordinal. Used by .compat-verdict--*, .compat-quality--*,
     * .compat-sav-fill--*. Tier 4 = best.
     * ---------------------------------------------------------------- */
    --tier-4-bg: #dcfce7;
    --tier-4-fg: #166534;
    --tier-3-bg: #d1fae5;
    --tier-3-fg: #065f46;
    --tier-2-bg: #fef3c7;
    --tier-2-fg: #92400e;
    --tier-1-bg: #fee2e2;
    --tier-1-fg: #991b1b;

    /* ── Planet-strength tiers ────────────────────────────────────────
     * BESPOKE values, not from any standard ramp. Kept separate from the
     * ranked tiers above on purpose - they were hand-picked and must not
     * be silently unified with them.
     * ---------------------------------------------------------------- */
    --ps-4-bg: #d7f5e0;
    --ps-4-fg: #146c3a;
    /* very strong */
    --ps-3-bg: #e4f0d0;
    --ps-3-fg: #4a6a12;
    /* strong */
    --ps-2-bg: #fdf0d5;
    --ps-2-fg: #8a5a12;
    /* moderate */
    --ps-1-bg: #fbe0e0;
    --ps-1-fg: #9a2b2b;
    /* weak */

    /* ── Categorical hues ─────────────────────────────────────────────
     * Hue = IDENTITY here, not rank. Used by .hit-* (life-department hit
     * types) and .ha-badge. Never reorder or reassign to imply ranking.
     * ---------------------------------------------------------------- */
    --cat-violet-bg: #ede9fe;
    --cat-violet-fg: #5b21b6;
    --cat-violet-bd: #c4b5fd;
    /* together */
    --cat-sky-bg: #e0f2fe;
    --cat-sky-fg: #0369a1;
    --cat-sky-bd: #7dd3fc;
    /* inspires */
    --cat-orange-bg: #fff7ed;
    --cat-orange-fg: #c2410c;
    --cat-orange-bd: #fdba74;
    /* corrects  */
    --cat-green-bg: #f0fdf4;
    --cat-green-fg: #166534;
    --cat-green-bd: #86efac;
    /* supports  */
    --cat-red-bg: #fef2f2;
    --cat-red-fg: #991b1b;
    --cat-red-bd: #fca5a5;
    /* restricts */
    --cat-yellow-bg: #fefce8;
    --cat-yellow-fg: #854d0e;
    --cat-yellow-bd: #fde047;
    /* bestows   */
    --cat-rose-bg: #fff1f2;
    --cat-rose-fg: #881337;
    --cat-rose-bd: #fda4af;
    /* pierces   */

    /* Dasha level chips (.ha-level-*). Also categorical.
     * NOTE (a11y debt, recorded not fixed): these render as 0.6rem bold
     * white on mid-tone fills; contrast is borderline at that size.
     * Flagged for the redesign - changing it now would break Stage A. */
    --level-md: var(--brand-600);
    --level-ad: #2563eb;
    --level-pd: var(--accent-600);
    --level-sd: #7c3aed;
    --level-prd: #db2777;

    /* ── Status ───────────────────────────────────────────────────── */
    --ok: #198754;
    --ok-bg: #f0fdf4;
    --ok-fg: #166534;
    --warn: var(--accent-600);
    --warn-bg: #fef3c7;
    --warn-fg: #92400e;
    --danger: #dc3545;
    --danger-bg: #fef2f2;
    --danger-fg: #991b1b;
    --info: #0369a1;
    --info-bg: #e0f2fe;
    --info-fg: #075985;

    /* ── Radii ────────────────────────────────────────────────────── */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ── Shadows ──────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 4px rgba(var(--black-rgb), 0.06);
    --shadow-sm: 0 2px 8px rgba(var(--black-rgb), 0.06);
    --shadow-md: 0 2px 12px rgba(var(--black-rgb), 0.08);
    --shadow-lg: 0 4px 12px rgba(var(--black-rgb), 0.15);
    --shadow-xl: 0 6px 16px rgba(var(--black-rgb), 0.2);
    --shadow-overlay: 0 25px 50px -12px rgba(var(--black-rgb), 0.4);

    /* ── Motion ───────────────────────────────────────────────────── */
    --transition-fast: 0.15s ease-in-out;
    --transition: 0.25s ease;
    --transition-slow: 0.3s ease;

    /* ── Type ─────────────────────────────────────────────────────── */
    --font-sans: 'Google Sans', ui-sans-serif, system-ui, sans-serif;
    --font-deva: 'Noto Sans Devanagari', var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Spacing ──────────────────────────────────────────────────────
     * NEW COMPONENTS ONLY. The existing sheets use ~20 ad-hoc rem values;
     * snapping them to this scale would produce dozens of 1-2px shifts -
     * an invisible redesign - for no theming benefit. Do not retrofit.
     * ---------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ── Layering ─────────────────────────────────────────────────────
     * Bootstrap 5.3 reference: sticky 1020, fixed 1030, offcanvas-backdrop
     * 1040, offcanvas 1045, modal-backdrop 1050, modal 1055.
     * The section tab bar sits at sticky level so the guide offcanvas
     * correctly covers it. Toastr is 999999, bottom-right - no conflict.
     * ---------------------------------------------------------------- */
    --z-float: 1000;
    --z-tabbar: 1020;

    /* ── Sticky section tab bar height ────────────────────────────────
     * Single source of truth: the bar's own height AND the
     * scroll-padding-top that keeps headings clear of it.
     * ---------------------------------------------------------------- */
    --tabbar-h: 44px;
}

@media (min-width: 768px) {
    :root {
        --tabbar-h: 48px;
    }
}