/* ═══════════════════════════════════════════════════════════════════════════
   VOLVENIX — DESIGN TOKENS (Single Source of Truth)
   Imported by both app.css and admin.css
   Do NOT define token values anywhere else.
═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Palette ──────────────────────────────────────────────────── */
  --brand-pink:        #E8187A;
  --brand-magenta:     #B5179E;
  --brand-purple:      #6A0DAD;
  --brand-violet:      #3D0B8C;
  --brand-deep:        #1A0533;
  --brand-coral:       #FF6B6B;

  /* ── Semantic Colour ─────────────────────────────────────────────────── */
  --color-primary:           var(--brand-magenta);
  --color-primary-hover:     var(--brand-purple);
  --color-accent:            var(--brand-pink);

  --color-bg:                #FFFFFF;
  --color-bg-alt:            #F8F9FC;
  --color-bg-invert:         var(--brand-deep);

  --color-text:              #0F0A1E;
  --color-text-body:         #374151;
  --color-text-muted:        #6B7280;
  --color-text-invert:       #FFFFFF;

  --color-border:            #E5E7EB;
  --color-border-focus:      var(--brand-magenta);

  --color-success:           #059669;
  --color-success-bg:        rgba(5,150,105,0.10);
  --color-warning:           #D97706;
  --color-warning-bg:        rgba(217,119,6,0.10);
  --color-danger:            #DC2626;
  --color-danger-bg:         rgba(220,38,38,0.08);
  --color-info:              #2563EB;
  --color-info-bg:           rgba(37,99,235,0.08);

  /* ── Gradients ───────────────────────────────────────────────────────── */
  --gradient-hero:     linear-gradient(180deg,
    #E8187A 0%, #C1189A 20%, #8B14B8 45%,
    #5A0FA8 65%, #2D0880 82%, #1A0533 100%);
  --gradient-accent:   linear-gradient(90deg, var(--brand-pink), var(--brand-purple));
  --gradient-card-top: linear-gradient(90deg, #E8187A 0%, #B5179E 50%, #6A0DAD 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-heading: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-base:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-2xs:  0.68rem;   /* ~11px — tiny captions, badges, overlines */
  --text-xs:   0.72rem;   /* ~11.5px — small helper text, table cells */
  --text-xs2:  0.75rem;   /* ~12px — secondary labels */
  --text-sm:   0.875rem;  /* ~14px — meta / small */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   0.9375rem; /* ~15px — de-emphasised body */
  --text-lg:   1.125rem;  /* ~18px — lead / card titles */
  --text-xl:   1.25rem;   /* 20px — small headings */
  --text-xl2:  1.375rem;  /* 22px — medium headings */
  --text-2xl:  1.5rem;    /* 24px — section headings */
  --text-3xl:  2rem;      /* 32px — H3 range */
  --text-4xl:  2.75rem;   /* 44px — H2 range */
  --text-hero: clamp(3.5rem, 6vw, 4rem); /* fluid H1 56–64px */

  /* ── Heading type scale ──────────────────────────────────────────── */
  --h1-size:    clamp(2rem, 5vw, 4rem);   /* 32–64px fluid */
  --h1-weight:  700;
  --h1-leading: 1.1;
  --h1-tracking: -0.01em;

  --h2-size:    clamp(1.75rem, 4vw, 2.75rem); /* 28–44px fluid */
  --h2-weight:  600;
  --h2-leading: 1.15;
  --h2-tracking: -0.005em;

  --h3-size:    clamp(1.375rem, 3vw, 2rem);   /* 22–32px fluid */
  --h3-weight:  600;
  --h3-leading: 1.2;
  --h3-tracking: 0em;

  --leading-tight:   1.1;
  --leading-snug:    1.4;
  --leading-normal:  1.65;
  --leading-relaxed: 1.8;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── Spacing (4px base grid) ─────────────────────────────────────────── */
  --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;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:     0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.14);
  --shadow-accent: 0 8px 32px rgba(181,23,158,0.18);

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
  --z-base:        0;
  --z-above:       10;
  --z-dropdown:    100;
  --z-header:      200;
  --z-header-sub:  199;   /* just below header (e.g. sticky bars) */
  --z-drawer:      300;
  --z-modal:       400;
  --z-toast:       500;
  --z-cookie:      600;
  --z-overlay:     1000;  /* full-screen overlays above cookie banner */
  --z-editor:      9100;  /* layout/page editor (must sit above all UI chrome) */
  --z-editor-top:  9200;  /* editor modals rendered above the editor canvas */
  --z-top:         9999;  /* absolute topmost layer */

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max: 100%;
  --container-pad: clamp(16px, 3vw, 40px);
  --nav-height:    72px;

  /* ── Navigation ──────────────────────────────────────────────────────── */
  --nav-bg:           rgba(42, 8, 100, 0.55);
  --nav-blur:         14px;
  --nav-border:       rgba(255,255,255,0.08);
  --nav-text:         rgba(255,255,255,0.80);
  --nav-text-active:  #FFFFFF;

  /* ── Cards ───────────────────────────────────────────────────────────── */
  --card-bg:           #FFFFFF;
  --card-border:       #E5E7EB;
  --card-border-hover: rgba(181,23,158,0.20);
  --card-shadow-hover: 0 8px 32px rgba(181,23,158,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --card-radius:       var(--radius-lg);

  /* ── Badges ──────────────────────────────────────────────────────────── */
  --badge-accent-bg:     rgba(184,23,158,0.08);
  --badge-accent-border: rgba(184,23,158,0.20);
  --badge-accent-text:   var(--color-primary);

  /* ── Footer ──────────────────────────────────────────────────────────── */
  --footer-bg:      #0F0A1E;
  --footer-link:    rgba(255,255,255,0.55);
  --footer-muted:   rgba(255,255,255,0.45);
  --footer-legal:   rgba(255,255,255,0.45);
  --footer-border:  rgba(255,255,255,0.06);

  /* ── Forms ───────────────────────────────────────────────────────────── */
  --input-bg:         var(--color-bg);
  --input-border:     var(--color-border);
  --input-radius:     var(--radius-md);
  --input-focus-ring: 0 0 0 3px rgba(181,23,158,0.12);

  /* ── Muted alias (used in utilities.css) ─────────────────────────────── */
  --muted: var(--color-text-muted);

  /* ── Extended semantic colours ───────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-success-dark:   #059669;
  --color-success-light:  #D1FAE5;
  --color-success-text:   #065F46;
  --color-danger-dark:    #DC2626;
  --color-danger-light:   #FEE2E2;
  --color-danger-text:    #991B1B;
  --color-warning-dark:   #D97706;
  --color-warning-light:  #FEF3C7;
  --color-warning-text:   #92400E;
  --color-info-dark:      #2563EB;
  --color-neutral-100:    #F3F4F6;
  --color-neutral-200:    #E5E7EB;
  --color-neutral-400:    #9CA3AF;
  --color-neutral-600:    #4B5563;
  --color-star:           #F59E0B;
  --color-purple-light:   #F3E8FF;


  /* ── Additional brand + UI colours ──────────────────────────── */
  --color-green-600:     #16A34A;
  --color-amber-400:     #FBBF24;
  --color-red-400:       #F87171;
  --color-indigo-600:    #4F46E5;
  --color-purple-600:    #7C3AED;
  --color-purple-700:    #6D28D9;
  --color-purple-alt:    #7B2FF7;
  --color-purple-bright: #6C63FF;
  --color-bg-card:       #F9FAFB;
  --color-bg-subtle:     #F3F4F6;
  --color-purple-wash:   #F3E8FF;
  --color-purple-wash-2: #F5F3FF;
  --color-navy-deep:     #1A1A2E;
  --color-navy-dark:     #16213E;
  --color-text-strong:   #111827;
  --color-info-dark:     #1E40AF;


  /* ── Extended palette — all remaining hardcoded values ─────── */
  --color-violet-300: #c4b5fd;
  --color-green-700: #15803d;
  --color-blue-100: #dbeafe;
  --color-warning-light: #fef3c7;
  --color-danger-light: #fee2e2;
  --color-neutral-300: #d1d5db;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-bronze: #b97c4a;
  --color-amber-700: #B45309;
  --color-violet-100: #ede9fe;
  --color-emerald-500: #10b981;
  --color-bg-darkest: #0d0118;
  --color-violet-400: #a78bfa;
  --color-pink-dark: #7c1d4e;
  --color-purple-dark: #5b1175;
  --color-danger-text: #991b1b;
  --color-violet-100-alt: #ddd0ff;
  --color-green-100: #dcfce7;
  --color-danger-700: #b91c1c;
  --color-warning-dark: #d97706;
  --color-ui-4f46e5: #4f46e5;
  --color-ui-a7f3d0: #a7f3d0;
  --color-ui-6ee7b7: #6ee7b7;
  --color-ui-e0c6ff: #e0c6ff;
  --color-ui-fca5a5: #fca5a5;
  --color-ui-10a37f: #10a37f;
  --color-ui-1a7a5e: #1a7a5e;
  --color-ui-f8fafc: #f8fafc;
  --color-ui-f0fdf4: #f0fdf4;
  --color-ui-bbf7d0: #bbf7d0;
  --color-ui-111: #111;
  --color-ui-1a0535: #1a0535;
  --color-ui-0c1830: #0c1830;
  --color-ui-cd7f32: #cd7f32;
  --color-ui-6a0dad: #6a0dad;
  --color-ui-1d4ed8: #1d4ed8;
  --color-ui-f9f0ff: #f9f0ff;
  --color-ui-ffd700: #FFD700;
  --color-ui-8b5cf6: #8b5cf6;
  --color-ui-fce7f3: #fce7f3;
  --color-ui-000: #000;
  --color-ui-7c3aed: #7C3AED;
  --color-ui-1877f2: #1877f2;
  --color-ui-0a66c2: #0a66c2;
  --color-ui-25d366: #25d366;
  --color-ui-7c3aed: #7c3aed;
  --color-ui-ef4444: #ef4444;
  --color-ui-3b82f6: #3b82f6;
  --color-ui-78350f: #78350f;
  --color-ui-60a5fa: #60a5fa;
  --color-ui-34d399: #34d399;
  --color-ui-999: #999;
  --color-ui-666: #666;
  --color-ui-333: #333;
  --color-ui-047857: #047857;

  /* ── Missing variable aliases (referenced in CSS but previously undefined) ── */
  --accent-light:               rgba(181,23,158,0.15);    /* light accent for hover borders */
  --bg2:                        var(--color-bg-alt);      /* ROI badge background alias */
  --color-text-primary:         var(--color-text);        /* admin inline-extracted alias */
  --color-text-secondary:       var(--color-text-muted);  /* admin inline-extracted alias */
  --color-background-secondary: var(--color-neutral-100); /* admin card/panel background */
  --color-border-tertiary:      rgba(229,231,235,0.6);    /* lighter border for nested elements */
  --hero-btn-bg:                var(--gradient-hero);     /* u-btn-hero utility background */
  --primary:                    var(--color-primary);     /* admin si- class accent alias */
  --surface:                    var(--card-bg);           /* admin si- class surface alias */

}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — overrides semantic colour tokens only.
   Brand palette and gradients are unchanged (they already read well on dark).
   Elements using hardcoded hex values will not be affected by this block.
   Toggle via JS: document.documentElement.setAttribute('data-theme','dark')
   System default: @media (prefers-color-scheme: dark)
═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root { --theme: dark; }
  :root:not([data-theme="light"]) { /* respect manual light override */
    /* ── Backgrounds ─────────────────────────────────────────────── */
    --color-bg:              #0F0A1E;
    --color-bg-alt:          #180E2E;
    --color-bg-invert:       #F0ECF8;

    /* ── Text ─────────────────────────────────────────────────────── */
    --color-text:            #F0ECF8;
    --color-text-body:       #C9C0D8;
    --color-text-muted:      #9490A2;
    --color-text-invert:     #0F0A1E;
    --color-text-strong:     #FFFFFF;

    /* ── Borders ──────────────────────────────────────────────────── */
    --color-border:          rgba(255,255,255,0.10);
    --color-border-focus:    var(--brand-pink);

    /* ── Cards ────────────────────────────────────────────────────── */
    --card-bg:               #1E1240;
    --card-border:           rgba(255,255,255,0.08);
    --card-border-hover:     rgba(232,24,122,0.30);

    /* ── Navigation ───────────────────────────────────────────────── */
    --nav-bg:                rgba(10,6,20,0.90);
    --nav-border:            rgba(255,255,255,0.06);

    /* ── Forms ────────────────────────────────────────────────────── */
    --input-bg:              #1E1240;
    --input-border:          rgba(255,255,255,0.15);
    --input-focus-ring:      0 0 0 3px rgba(232,24,122,0.20);

    /* ── Neutral scale ────────────────────────────────────────────── */
    --color-neutral-100:     #231540;
    --color-neutral-200:     #2d1e50;
    --color-neutral-300:     #6B6080;
    --color-neutral-400:     #9490A2;
    --color-neutral-600:     #C9C0D8;

    /* ── Status bg (keep hue, darken fill) ───────────────────────── */
    --color-success-bg:      rgba(5,150,105,0.15);
    --color-warning-bg:      rgba(217,119,6,0.15);
    --color-danger-bg:       rgba(220,38,38,0.12);
    --color-info-bg:         rgba(37,99,235,0.12);

    /* ── Alias updates ────────────────────────────────────────────── */
    --surface:               #1E1240;
    --bg2:                   #1E1240;
    --color-background-secondary: #231540;
    --color-border-tertiary: rgba(255,255,255,0.06);
    --color-text-primary:    #F0ECF8;
    --color-text-secondary:  #9490A2;
    --muted:                 #9490A2;
    --accent-light:          rgba(232,24,122,0.18);
  }
}

/* JS-controlled dark mode (overrides system preference when set explicitly) */
:root[data-theme="dark"] {
  --color-bg:              #0F0A1E;
  --color-bg-alt:          #180E2E;
  --color-bg-invert:       #F0ECF8;
  --color-text:            #F0ECF8;
  --color-text-body:       #C9C0D8;
  --color-text-muted:      #9490A2;
  --color-text-invert:     #0F0A1E;
  --color-text-strong:     #FFFFFF;
  --color-border:          rgba(255,255,255,0.10);
  --card-bg:               #1E1240;
  --card-border:           rgba(255,255,255,0.08);
  --card-border-hover:     rgba(232,24,122,0.30);
  --nav-bg:                rgba(10,6,20,0.90);
  --nav-border:            rgba(255,255,255,0.06);
  --input-bg:              #1E1240;
  --input-border:          rgba(255,255,255,0.15);
  --input-focus-ring:      0 0 0 3px rgba(232,24,122,0.20);
  --color-neutral-100:     #231540;
  --color-neutral-200:     #2d1e50;
  --color-neutral-300:     #6B6080;
  --color-neutral-400:     #9490A2;
  --color-neutral-600:     #C9C0D8;
  --color-success-bg:      rgba(5,150,105,0.15);
  --color-warning-bg:      rgba(217,119,6,0.15);
  --color-danger-bg:       rgba(220,38,38,0.12);
  --color-info-bg:         rgba(37,99,235,0.12);
  --surface:               #1E1240;
  --bg2:                   #1E1240;
  --color-background-secondary: #231540;
  --color-border-tertiary: rgba(255,255,255,0.06);
  --color-text-primary:    #F0ECF8;
  --color-text-secondary:  #9490A2;
  --muted:                 #9490A2;
  --accent-light:          rgba(232,24,122,0.18);
}