/* =============================================================
 * Myra · Design Tokens — "Stripe Lumen" (Phase 2A · Step 2)
 *
 * Source of truth for colours, type, spacing, radii, shadows,
 * motion and z-index. Components MUST consume tokens — never
 * inline hex codes or magic numbers.
 *
 * Naming is semantic (--bg-primary, --brand-primary, …) so that
 * dark mode (deferred to v2) drops in via prefers-color-scheme
 * without touching component CSS.
 *
 * Backward-compat shim at the bottom remaps legacy variables
 * (--bg, --accent, --muted, …) onto the new tokens so existing
 * pages roll forward to the new palette without a per-screen
 * migration. Mild visible shift on legacy screens by design.
 * ============================================================= */

:root {
  /* ===== Surfaces ============================================ */
  --bg-primary:        #FFFFFF;  /* white content canvas (Concept B) */
  --bg-elevated:       #FFFFFF;  /* card / panel surface that lifts above canvas */
  --bg-deeper:         #F5F3FB;  /* subtle lavender-tinted zoning band (purple refresh) */
  --bg-inverse:        #0A1E31;  /* rare; for dark callouts on light pages */

  /* Hero radial — soft navy tint → peach. Use only on hero,
     billing-success, and 1–2 empty states. See DESIGN_SYSTEM.md. */
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 85% -10%, #EDE7FE 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 0% 110%,  #F3EEFF 0%, transparent 60%),
    var(--bg-primary);

  /* Mobile fallback — flat surface on viewports < 600px so
     gradients don't compete with content in narrow widths. */
  --gradient-hero-fallback: var(--bg-primary);

  /* ===== Text =============================================== */
  --text-primary:      #122A40;  /* navy ink (Concept B) */
  --text-secondary:    #5A7089;  /* body labels, AA on bg-primary */
  --text-tertiary:     #7E93A9;  /* placeholders, metadata, dim labels */
  --text-inverse:      #FFFFFF;  /* on brand / on dark surfaces */
  --text-link:         #6D28D9;  /* violet family, darkened for AA on white */

  /* ===== Borders & dividers ================================= */
  --border-subtle:     #E3E9F0;  /* default 1px hairline */
  --border-strong:     #C9D6E2;  /* hover/focus borders, table rules */
  --border-inverse:    #274B6E;  /* dark surfaces */

  /* ===== Brand ============================================== */
  /* Purple refresh (owner pick, 16.07) — violet is THE Myra brand,
     paired with the rounded 3D mascot. Reverts the 11.07 coral/graphite. */
  --brand-primary:        #7C3AED;  /* violet */
  --brand-primary-hover:  #6D28D9;  /* darker for hover, AA w/ white text */
  --brand-primary-active: #5B21B6;  /* press / active / small violet text on tints */
  --brand-soft:           #F3EEFF;  /* violet wash for active-nav, soft pills */
  --brand-soft-hover:     #E9E1FD;  /* slightly deeper soft wash */
  --brand-accent-2:       #A78BFA;  /* light violet — gradient end + sparing accent */
  --brand-accent-2-soft:  #EDE7FE;  /* violet wash for badges, highlights */

  /* ===== Light shell (purple refresh — white sidebar, 16.07) ==
     Was Linear graphite (11.07). New brand direction = airy white
     sidebar with violet active state, matching the approved mockup. */
  --shell-bg:        #FFFFFF;  /* sidebar surface — white */
  --shell-bg-deep:   #FBFAFE;  /* faint lavender base for nested wells */
  --shell-hover:     #F3EEFF;  /* hover / active item surface (violet wash) */
  --shell-line:      #ECEAF3;  /* hairlines */
  --shell-text:      #4B4666;  /* nav item text (ink) */
  --shell-icon:      #8A83A3;  /* nav item icons (muted) */
  --shell-muted:     #8A83A3;  /* secondary text */
  --shell-dim:       #A9A3BD;  /* section kickers */
  --font-shell:      "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* ===== Semantic =========================================== */
  --success:           #1F8A66;  /* teal-leaning green, sits inside palette family */
  --success-bg:        #DCF1E8;  /* soft success wash */
  --success-border:    #B6E0CE;
  --warning:           #D88A2A;  /* warm amber */
  --warning-bg:        #FBEBD3;
  --warning-border:    #F1D5A4;
  --error:             #D24C4C;  /* warm crimson, not pure red */
  --error-bg:          #FBE0DE;
  --error-border:      #F2BCB7;
  --info:              var(--brand-primary);
  --info-bg:           var(--brand-soft);
  --info-border:       #F6C9BD;

  /* ===== Typography ========================================= */
  /* Manrope is loaded by base.html — one type family across the whole product
     (body + display) for a consistent brand voice (Demir 2026-07-16). */
  --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  --tracking-tighter: -0.03em;  /* hero-scale display */
  --tracking-tight:   -0.02em;  /* default for headings */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;   /* small labels, eyebrows */
  --tracking-widest:  0.08em;   /* uppercase eyebrow labels */

  /* ===== Spacing (4px grid) ================================= */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ===== Radii ============================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ===== Shadows (navy-tinted) =============================== */
  /* Tinted toward the navy ink — not gray — so depth feels
     consistent with the shell and brand. */
  --shadow-xs: 0 1px 2px rgba(15, 42, 67, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 42, 67, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 42, 67, 0.07);
  --shadow-lg: 0 8px 24px rgba(15, 42, 67, 0.09);
  --shadow-xl: 0 16px 48px rgba(15, 42, 67, 0.11);
  --shadow-2xl: 0 24px 64px rgba(15, 42, 67, 0.13);
  --shadow-focus: 0 0 0 4px rgba(124, 58, 237, 0.20); /* brand focus ring (violet) */

  /* ===== Motion ============================================= */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* Stripe-style entrance */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* default for state changes */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* reserved; do not default to it */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --duration-slower:  500ms;

  /* ===== Z-index =========================================== */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ===== Layout =========================================== */
  --container-compact: 760px;
  --container-medium:  1120px;
  --container-wide:    1480px;
}

/* =============================================================
 * Backward-compat shim — legacy variable names
 *
 * Navy+coral rebrand (2026-07): legacy aliases now point at the
 * new palette so every legacy screen flips to the new brand in
 * one move (violet accents -> coral, warm neutrals -> navy-cast
 * neutrals). Names are kept so legacy templates need no edits.
 *
 * Loaded AFTER the inline <style> block in base.html so this
 * :root rule wins the cascade, even on templates that don't
 * extend base.html.
 * ============================================================= */
:root {
  --bg:           #F8FAFC;
  --bg2:          #F0F4F8;
  --border:       #E3E9F0;
  --accent:       #F0563C;
  --accent-light: #FDE8E3;
  --green:        #059669;
  --green-light:  #D1FAE5;
  --red:          #DC2626;
  --red-light:    #FEE2E2;
  --text:         #122A40;
  --muted:        #5A7089;
  --dim:          #93A6BA;
  --font:         'Manrope', system-ui, sans-serif;
  --r:            12px;
  --shadow:       0 1px 3px rgba(15,42,67,0.08), 0 4px 16px rgba(15,42,67,0.06);
}

/* =============================================================
 * Dark theme — applied via <html data-theme="dark">.
 *
 * Redefines BOTH the semantic tokens AND the legacy-shim aliases so
 * token-pure screens (admin console, dashboard) flip for free and
 * legacy screens at least pick up surface/text/brand. Inline hardcoded
 * colours (background:white, #fff) still need per-screen migration —
 * tracked as the dark-theme audit. Default (no attr) stays light.
 * ============================================================= */
:root[data-theme="dark"] {
  /* Surfaces — navy-cast darks */
  --bg-primary:   #0C1826;
  --bg-elevated:  #122336;
  --bg-deeper:    #1A3049;
  --bg-inverse:   #F2F6FA;
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 85% -10%, rgba(143,169,194,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 0% 110%,  rgba(167,139,250,0.12) 0%, transparent 60%),
    var(--bg-primary);
  --gradient-hero-fallback: var(--bg-primary);
  /* Text */
  --text-primary:   #F0F5FA;
  --text-secondary: #AFC4D6;
  --text-tertiary:  #7B94AC;
  --text-inverse:   #0A1E31;
  --text-link:      #C4B5FD;
  /* Borders */
  --border-subtle: #24405A;
  --border-strong: #305173;
  --border-inverse:#E3E9F0;
  /* Brand (lifted for contrast on dark — violet) */
  --brand-primary:        #A78BFA;
  --brand-primary-hover:  #B9A3FB;
  --brand-primary-active: #C9B8FC;
  --brand-soft:           #2A1E3F;
  --brand-soft-hover:     #362651;
  --brand-accent-2:       #A78BFA;
  --brand-accent-2-soft:  #2A1E3F;
  /* Navy shell — slightly deeper than canvas in dark mode */
  --shell-bg:      #121417;
  --shell-bg-deep: #0C0E10;
  --shell-hover:   #202329;
  --shell-line:    #2C3036;
  /* Semantic */
  --success:        #34D399;
  --success-bg:     #0F3A2C;
  --success-border: #1F6B50;
  --success-soft:   #0F3A2C;
  --success-strong: #34D399;
  --warning:        #F0B45C;
  --warning-bg:     #3A2E16;
  --warning-border: #6B5526;
  --error:          #F87171;
  --error-bg:       #3A1E1E;
  --error-border:   #6B2E2E;
  --info:           var(--brand-primary);
  --info-bg:        var(--brand-soft);
  --info-border:    #66301F;
  /* Shadows — deeper on dark */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.38);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.46);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.55);
  --shadow-xl: 0 18px 50px rgba(0,0,0,0.62);
  --shadow-2xl:0 28px 70px rgba(0,0,0,0.68);
  --shadow-focus: 0 0 0 4px rgba(255,122,92,0.30);
  /* Legacy-shim aliases → dark, so legacy screens roll over too */
  --bg:           #0C1826;
  --bg2:          #122336;
  --border:       #24405A;
  --accent:       #FF7A5C;
  --accent-light: #3B211A;
  --green:        #34D399;
  --green-light:  #0F3A2C;
  --red:          #F87171;
  --red-light:    #3A1E1E;
  --text:         #F0F5FA;
  --muted:        #AFC4D6;
  --dim:          #7B94AC;
  --shadow:       0 2px 8px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); }

/* =============================================================
 * Reduced-motion respect
 * Hard-disable transitions/animations for users who request it.
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}