/* Design tokens mirrored verbatim from base.html's inline :root block. Loaded by the standalone auth pages (login/signup/password-reset) that do NOT extend base.html, so they resolve the same --brand-*/--text-*/--surface/--border tokens as the rest of the app. */

/* =========================
   THEME TOKENS (dark/light)
   Stripe-inspired refinements
   ========================= */

/* DARK (par défaut) */
:root{
    /* Brand (emerald) */
    --brand-500: #6EE7B7;
    --brand-600: #34D399;
    --brand-700: #10B981;
    --brand-800: #059669;
    --brand-soft: rgba(110,231,183,0.14);

    /* Brand RGB triplets for Tailwind opacity */
    --brand-50-rgb:  236 253 245;
    --brand-100-rgb: 209 250 229;
    --brand-200-rgb: 167 243 208;
    --brand-300-rgb: 110 231 183;
    --brand-400-rgb: 52 211 153;
    --brand-500-rgb: 16 185 129;
    --brand-600-rgb: 5 150 105;
    --brand-700-rgb: 4 120 87;
    --brand-800-rgb: 6 95 70;
    --brand-900-rgb: 6 78 59;
    --brand-950-rgb: 2 44 34;

    /* Secondary (sky/blue) */
    --secondary-500: #0284c7;
    --secondary-light: #7dd3fc;
    --secondary-soft: rgba(2,132,199,0.12);

    /* Accent (violet/purple) */
    --accent-300: #a78bfa;
    --accent-400: #8b5cf6;
    --accent-500: #7c3aed;
    --accent-soft: rgba(124,58,237,0.12);

    /* Status */
    --success: #10B981;
    --success-soft: rgba(16,185,129,0.15);
    --warning: #f59e0b;
    --warning-soft: rgba(245,158,11,0.15);
    --error: #f87171;
    --error-dark: #dc2626;
    --error-light: #fca5a5;
    --error-soft: rgba(220,38,38,0.15);

    /* Status badge text (CLR-04) — DARK: bright glass mints/amber/coral
       measure >=4.5:1 on their soft fills over the dark surface
       (ok 7.19:1, attn 6.32:1, danger 5.81:1, neutral 6.16:1). */
    --ui-badge-ok-text:     var(--brand-600);   /* #34D399 */
    --ui-badge-attn-text:   var(--warning);     /* #f59e0b */
    --ui-badge-danger-text: var(--error);       /* #f87171 */

    /* === Type scale (CLR-04) — 4 sizes, formalized from existing values ===
       Meta 12px / Body 14px / Heading 16px / Display 28px. Two weights only:
       400 body, 600 emphasis (see .ui-meta for the muted-metadata role). */
    --text-meta:    0.75rem;   /* 12px — muted metadata (.ui-meta) */
    --text-body:    0.875rem;  /* 14px — body / labels */
    --text-heading: 1rem;      /* 16px — section headings */
    --text-display: 1.75rem;   /* 28px — page / display headings */

    /* Surfaces */
    --surface: #0f1a22;
    --surface-soft: #0c171c;

    /* Text */
    --text-main: rgba(255,255,255,0.92);
    --text-muted: rgba(255,255,255,0.55);

    /* Borders */
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);

    /* Shadow */
    --shadow: 0 1px 2px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.32);

    /* Radii */
    --radius-lg: 16px;
    --radius-md: 12px;

    /* === Legacy / backward-compat aliases === */
    --bg-1: #0b0f1a;
    --bg-2: #070a12;
    --bg-3: #05070d;

    --text: var(--text-main);
    --muted: var(--text-muted);

    --glass-bg: var(--surface);
    --glass-border: rgba(255,255,255,0.06);
    --glass-shadow: var(--shadow);

    --soft-bg: var(--surface-soft);
    --soft-border: rgba(255,255,255,0.04);

    --hover-border: rgba(16,185,129,0.18);
    --hover-shadow: 0 1px 2px rgba(16,185,129,0.10), 0 4px 14px rgba(0,0,0,0.36);

    --glow-1: rgba(16,185,129,0.14);
    --glow-2: rgba(52,211,153,0.07);

    /* Sidebar (DARK) */
    --sidebar-bg: rgba(2, 6, 23, 0.82);
    --sidebar-border: rgba(255,255,255,0.07);
    --sidebar-shadow: 1px 0 0 rgba(255,255,255,0.06);

    --sidebar-overlay: rgba(0,0,0,0.18);

    --nav-bg: transparent;
    --nav-border: transparent;
    --nav-hover-bg: rgba(16,185,129,0.10);
    --nav-hover-border: rgba(16,185,129,0.18);
    --nav-active-accent: rgba(16,185,129,0.70);

    /* Stripe-like inset divider */
    --divider: var(--border);
    --row-hover: rgba(16,185,129,0.10);
}

/* LIGHT (Stripe-inspired: clean white + green accents) */
html[data-theme="light"]{
    --bg-1: #f5f8f6;
    --bg-2: #e8eeeb;
    --bg-3: #e6ece9;

    --text-main: #0f172a;
    --text-muted: #334155;
    --text: var(--text-main);
    --muted: var(--text-muted);

    --border: rgba(15,23,42,0.20);
    --border-strong: rgba(15,23,42,0.28);

    --glass-bg: #ffffff;
    --glass-border: var(--border);
    --glass-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 24px rgba(15,23,42,0.10);

    --soft-bg: #e8eeeb;
    --soft-border: rgba(15,23,42,0.18);

    --hover-border: rgba(5,150,105,0.22);
    --hover-shadow: 0 1px 3px rgba(5,150,105,0.08), 0 6px 28px rgba(15,23,42,0.12);

    --glow-1: rgba(5,150,105,0.06);
    --glow-2: rgba(5,150,105,0.03);

    --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 4px 24px rgba(15,23,42,0.10);

    --surface: #ffffff;
    --surface-soft: #e8eeeb;

    /* Status badge text (CLR-04) — LIGHT: the bright glass mints/amber/coral
       fail 4.5:1 on the near-white soft fills (ok 1.66:1, attn 1.91:1,
       danger 2.18:1), so remap to darker shades that pass
       (ok #065f46 6.65:1, attn #92400e 6.31:1, danger #991b1b 6.56:1;
       neutral --muted #334155 on --soft-bg = 8.81:1). */
    --ui-badge-ok-text:     #065f46;
    --ui-badge-attn-text:   #92400e;
    --ui-badge-danger-text: #991b1b;

    /* Sidebar (LIGHT) — tinted for contrast with white cards */
    --sidebar-bg: #e8eeeb;
    --sidebar-border: rgba(15,23,42,0.12);
    --sidebar-shadow: 2px 0 16px rgba(15,23,42,0.06);

    --sidebar-overlay: rgba(26,31,54,0.08);

    --nav-bg: transparent;
    --nav-border: transparent;
    --nav-hover-bg: rgba(5,150,105,0.12);
    --nav-hover-border: rgba(5,150,105,0.18);
    --nav-active-accent: rgba(5,150,105,0.80);

    --divider: var(--border);
    --row-hover: rgba(5,150,105,0.10);
}