/* ═══════════════════════════════════════════════════════
   MintFolder AI — Brand Design Tokens
   Single source of truth for colors, typography, radius.
   Linked in all standalone pages; each page may override
   in its own <style> block (which loads after this file).
   ═══════════════════════════════════════════════════════ */

/* Fonts: self-hosted per page (@font-face in each HTML).
   brand.css only defines tokens — no font loading here. */

/* ── Dark mode (default) ────────────────────────────── */
:root {
  /* Surface */
  --brand-bg:           #060608;
  --brand-bg2:          #0c0c14;
  --brand-surface:      rgba(255,255,255,0.042);
  --brand-surface-b:    rgba(255,255,255,0.082);
  --brand-surface-h:    rgba(255,255,255,0.09);

  /* Text */
  --brand-text-1:       #f0f0f5;
  --brand-text-2:       rgba(240,240,245,0.72);
  --brand-text-3:       rgba(240,240,245,0.62);
  --brand-text-4:       rgba(240,240,245,0.55);

  /* Accent palette */
  --brand-blue:         #4B8BFF;
  --brand-blue-dim:     rgba(75,139,255,0.12);
  --brand-blue-glow:    rgba(75,139,255,0.30);
  --brand-violet:       #8B5CF6;
  --brand-violet-dim:   rgba(139,92,246,0.12);
  --brand-violet-glow:  rgba(139,92,246,0.20);
  --brand-green:        #10B981;
  --brand-green-dim:    rgba(16,185,129,0.12);
  --brand-green-glow:   rgba(16,185,129,0.25);
  --brand-amber:        #F59E0B;
  --brand-amber-dim:    rgba(245,158,11,0.10);
  --brand-red:          #EF4444;
  --brand-red-dim:      rgba(239,68,68,0.10);
  --brand-cyan:         #06B6D4;
  --brand-cyan-dim:     rgba(6,182,212,0.10);
  --brand-cyan-glow:    rgba(6,182,212,0.30);
  --brand-mint:         #00D4AA;
  --brand-teal:         #64F0D6;
  --brand-teal-glow:    rgba(100,240,214,0.10);

  /* Dividers & borders */
  --brand-divider:      rgba(255,255,255,0.08);
  --brand-border:       rgba(255,255,255,0.05);
  --brand-border-2:     rgba(255,255,255,0.08);
  --brand-border-3:     rgba(255,255,255,0.14);

  /* Radius */
  --brand-r-sm:   10px;
  --brand-r-md:   16px;
  --brand-r-lg:   22px;
  --brand-r-xl:   28px;
  --brand-r-pill: 100px;

  /* Layout */
  --brand-sidebar-w:    240px;
  --brand-content-pad:  28px;
  --brand-content-max-w:1100px;
  --brand-topbar-h:     56px;
  --brand-section-gap:  24px;
  --brand-panel-pad:    20px;

  /* Easing */
  --brand-ease:   cubic-bezier(0.25,0.46,0.45,0.94);
  --brand-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Typography scale (clamp: mobile -> desktop) */
  --brand-fs-base:      14px;
  --brand-fs-hero:      clamp(26px, 5vw, 42px);
  --brand-fs-section:   clamp(18px, 3.5vw, 28px);
  --brand-fs-subtitle:  clamp(14px, 2vw, 18px);
  --brand-fs-body:      14px;
  --brand-fs-lg:        16px;
  --brand-fs-panel:     14px;
  --brand-fs-small:     12px;
  --brand-fs-meta:      11px;
  --brand-fs-xs:        11px;

  /* Line-height scale */
  --brand-lh-tight:     1.2;
  --brand-lh-base:      1.5;
  --brand-lh-relaxed:   1.7;

  /* Font stack */
  --brand-font:         'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --brand-font-ar:      'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --brand-font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ─────────────────────────────────────────────────────
     Compatibility Aliases
     ─────────────────────────────────────────────────────
     Multiple pages grew their own variable names before
     brand.css existed.  The aliases below let NEW pages
     use any of those short names while pulling values
     from the canonical --brand-* tokens above.
     Existing pages keep working because they re-declare
     these vars in their own <style> blocks (which wins
     by specificity).  Over time, pages can drop their
     local :root blocks and rely on brand.css alone.

     Naming conventions mapped:
       index.html ........... --bg, --blue, --t1
       dashboard.html ....... --void, --cyan, --t1
       admin_dashboard.html . --bg, --ink, --cyan
       faq.html ............. --clr-bg, --clr-accent
       landing.html ......... --c-s0, --accent
     ───────────────────────────────────────────────────── */

  /* --- Surface aliases (index / admin) --- */
  --bg:               var(--brand-bg);
  --bg2:              var(--brand-bg2);
  --bg3:              var(--brand-bg2);

  /* --- Surface aliases (dashboard) --- */
  --void:             var(--brand-bg);
  --deep:             var(--brand-bg2);

  /* --- Surface aliases (landing) --- */
  --c-s0:             var(--brand-bg);
  --c-s1:             var(--brand-bg2);
  --c-s2:             #0f0f18;
  --c-s3:             #16162a;
  --c-s4:             #1e1e3a;
  --c-s5:             #2a2a45;

  /* --- Surface aliases (faq) --- */
  --clr-bg:           var(--brand-bg);

  /* --- Glass / surface helpers --- */
  --glass:            var(--brand-surface);
  --glass-b:          var(--brand-surface-b);
  --glass-h:          var(--brand-surface-h);
  --glass-bg:         var(--brand-surface);
  --glass-border:     var(--brand-surface-b);
  --surface:          var(--brand-surface);
  --surface2:         var(--brand-surface-b);
  --surface3:         var(--brand-surface-h);
  --clr-glass:        var(--brand-surface);
  --clr-glass-border: var(--brand-surface-b);

  /* --- Border aliases (admin) --- */
  --border:           var(--brand-border);
  --border2:          var(--brand-border-2);
  --border3:          var(--brand-border-3);

  /* --- Text aliases (index) --- */
  --t1:               var(--brand-text-1);
  --t2:               var(--brand-text-2);
  --t3:               var(--brand-text-3);
  --t4:               var(--brand-text-4);

  /* --- Text aliases (admin) --- */
  --ink:              var(--brand-text-1);
  --ink2:             var(--brand-text-2);
  --ink3:             var(--brand-text-3);

  /* --- Text aliases (faq) --- */
  --clr-text-1:       var(--brand-text-1);
  --clr-text-2:       var(--brand-text-2);
  --clr-text-3:       var(--brand-text-3);

  /* --- Accent / blue --- */
  --blue:             var(--brand-blue);
  --blue-dim:         var(--brand-blue-dim);
  --blue-glow:        var(--brand-blue-glow);
  --bluedim:          var(--brand-blue-dim);
  --blueglow:         var(--brand-blue-glow);
  --accent:           var(--brand-blue);
  --accent-glow:      var(--brand-blue-glow);
  --clr-accent:       var(--brand-blue);
  --clr-accent-glow:  var(--brand-blue-glow);
  --clr-accent-2:     var(--brand-blue);

  /* --- Cyan / teal --- */
  --cyan:             var(--brand-cyan);
  --cyan2:            var(--brand-cyan);
  --cyandim:          var(--brand-cyan-dim);
  --cyanglow:         var(--brand-cyan-glow);
  --cyan-glow:        var(--brand-cyan-glow);
  --cyan-dim:         var(--brand-cyan-dim);
  --teal:             var(--brand-teal);
  --teal-glow:        var(--brand-teal-glow);

  /* --- Violet --- */
  --violet:           var(--brand-violet);
  --violet-dim:       var(--brand-violet-dim);
  --violet-glow:      var(--brand-violet-glow);
  --violetdim:        var(--brand-violet-dim);
  --violetglow:       var(--brand-violet-glow);

  /* --- Green --- */
  --green:            var(--brand-green);
  --green-dim:        var(--brand-green-dim);
  --green-glow:       var(--brand-green-glow);
  --greendim:         var(--brand-green-dim);
  --greenglow:        var(--brand-green-glow);
  --clr-green:        var(--brand-green);

  /* --- Amber --- */
  --amber:            var(--brand-amber);
  --amber-dim:        var(--brand-amber-dim);
  --amber-glow:       rgba(245,158,11,0.12);
  --amberdim:         var(--brand-amber-dim);
  --clr-yellow:       var(--brand-amber);

  /* --- Red --- */
  --red:              var(--brand-red);
  --red-dim:          var(--brand-red-dim);
  --red-glow:         rgba(239,68,68,0.12);
  --reddim:           var(--brand-red-dim);
  --clr-rose:         var(--brand-red);

  /* --- Divider aliases --- */
  --div:              var(--brand-divider);
  --clr-divider:      var(--brand-divider);

  /* --- Radius aliases (index shorthand) --- */
  --r-sm:             var(--brand-r-sm);
  --r-md:             var(--brand-r-md);
  --r-lg:             var(--brand-r-lg);
  --r-xl:             var(--brand-r-xl);
  --r-pill:           var(--brand-r-pill);
  --r:                8px;
  --r2:               12px;
  --r3:               var(--brand-r-md);
  --radius-sm:        var(--brand-r-sm);
  --radius-md:        var(--brand-r-md);
  --radius-lg:        var(--brand-r-lg);
  --radius-pill:      var(--brand-r-pill);

  /* --- Easing aliases --- */
  --ease:             var(--brand-ease);
  --spring:           var(--brand-spring);
  --ease-spring:      var(--brand-spring);
  --ease-smooth:      cubic-bezier(0.4,0,0.2,1);

  /* --- Font aliases --- */
  --f1:               var(--brand-font);
  --f2:               var(--brand-font);
  --fm:               var(--brand-font-mono);
  --f-display:        var(--brand-font);
  --f-body:           var(--brand-font);
  --f-mono:           var(--brand-font-mono);
  --font-display:     var(--brand-font);
  --font-mono:        var(--brand-font-mono);

  /* --- Typography scale aliases --- */
  --fs-base:          var(--brand-fs-base);
  --fs-body:          var(--brand-fs-body);
  --fs-lg:            var(--brand-fs-lg);
  --fs-panel:         var(--brand-fs-panel);
  --fs-small:         var(--brand-fs-small);
  --fs-meta:          var(--brand-fs-meta);
  --fs-xs:            var(--brand-fs-xs);

  /* --- Line-height aliases --- */
  --lh-tight:         var(--brand-lh-tight);
  --lh-base:          var(--brand-lh-base);
  --lh-relaxed:       var(--brand-lh-relaxed);

  /* --- Layout aliases --- */
  --sidebar-w:        var(--brand-sidebar-w);
  --sidebar:          var(--brand-sidebar-w);
  --content-pad:      var(--brand-content-pad);
  --content-max-w:    var(--brand-content-max-w);
  --topbar-h:         var(--brand-topbar-h);
  --section-gap:      var(--brand-section-gap);
  --panel-pad:        var(--brand-panel-pad);

  /* --- Misc helpers (faq) --- */
  --blur:             20px;
  --blur-heavy:       48px;
  --safe-top:         env(safe-area-inset-top,0px);
  --safe-bottom:      env(safe-area-inset-bottom,0px);
}

/* ── Light mode ─────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* Canonical brand tokens */
    --brand-bg:         #F5F5FA;
    --brand-bg2:        #EEEEF4;
    --brand-surface:    rgba(0,0,0,0.03);
    --brand-surface-b:  rgba(0,0,0,0.08);
    --brand-surface-h:  rgba(0,0,0,0.05);
    --brand-text-1:     #0f0f14;
    --brand-text-2:     rgba(15,15,20,0.72);
    --brand-text-3:     rgba(15,15,20,0.62);
    --brand-text-4:     rgba(15,15,20,0.55);
    --brand-blue:       #2563EB;
    --brand-blue-dim:   rgba(37,99,235,0.10);
    --brand-blue-glow:  rgba(37,99,235,0.20);
    --brand-violet:     #7C3AED;
    --brand-violet-dim: rgba(124,58,237,0.10);
    --brand-violet-glow:rgba(124,58,237,0.15);
    --brand-green:      #059669;
    --brand-green-dim:  rgba(5,150,105,0.10);
    --brand-green-glow: rgba(5,150,105,0.18);
    --brand-amber:      #D97706;
    --brand-amber-dim:  rgba(217,119,6,0.10);
    --brand-red:        #DC2626;
    --brand-red-dim:    rgba(220,38,38,0.10);
    --brand-cyan:       #0891B2;
    --brand-cyan-dim:   rgba(8,145,178,0.10);
    --brand-cyan-glow:  rgba(8,145,178,0.20);
    --brand-mint:       #00A882;
    --brand-teal:       #2DD4BF;
    --brand-teal-glow:  rgba(45,212,191,0.12);
    --brand-divider:    rgba(0,0,0,0.08);
    --brand-border:     rgba(0,0,0,0.06);
    --brand-border-2:   rgba(0,0,0,0.10);
    --brand-border-3:   rgba(0,0,0,0.16);

    /* Light-mode surface scale (landing) */
    --c-s0:             #f8fafc;
    --c-s1:             #f1f5f9;
    --c-s2:             #e2e8f0;
    --c-s3:             #cbd5e1;
    --c-s4:             #94a3b8;
    --c-s5:             #64748b;
  }
}

/* Light mode via data attribute (used by pages with manual toggle) */
html[data-theme="light"] {
  /* Canonical brand tokens */
  --brand-bg:         #F5F5FA;
  --brand-bg2:        #EEEEF4;
  --brand-surface:    rgba(0,0,0,0.03);
  --brand-surface-b:  rgba(0,0,0,0.08);
  --brand-surface-h:  rgba(0,0,0,0.05);
  --brand-text-1:     #0f0f14;
  --brand-text-2:     rgba(15,15,20,0.72);
  --brand-text-3:     rgba(15,15,20,0.62);
  --brand-text-4:     rgba(15,15,20,0.55);
  --brand-blue:       #2563EB;
  --brand-blue-dim:   rgba(37,99,235,0.10);
  --brand-blue-glow:  rgba(37,99,235,0.20);
  --brand-violet:     #7C3AED;
  --brand-violet-dim: rgba(124,58,237,0.10);
  --brand-violet-glow:rgba(124,58,237,0.15);
  --brand-green:      #059669;
  --brand-green-dim:  rgba(5,150,105,0.10);
  --brand-green-glow: rgba(5,150,105,0.18);
  --brand-amber:      #D97706;
  --brand-amber-dim:  rgba(217,119,6,0.10);
  --brand-red:        #DC2626;
  --brand-red-dim:    rgba(220,38,38,0.10);
  --brand-cyan:       #0891B2;
  --brand-cyan-dim:   rgba(8,145,178,0.10);
  --brand-cyan-glow:  rgba(8,145,178,0.20);
  --brand-mint:       #00A882;
  --brand-teal:       #2DD4BF;
  --brand-teal-glow:  rgba(45,212,191,0.12);
  --brand-divider:    rgba(0,0,0,0.08);
  --brand-border:     rgba(0,0,0,0.06);
  --brand-border-2:   rgba(0,0,0,0.10);
  --brand-border-3:   rgba(0,0,0,0.16);

  /* Light-mode surface scale (landing) */
  --c-s0:             #f8fafc;
  --c-s1:             #f1f5f9;
  --c-s2:             #e2e8f0;
  --c-s3:             #cbd5e1;
  --c-s4:             #94a3b8;
  --c-s5:             #64748b;
}

/* ── Shared UI components ──────────────────────────── */
/* Identical across admin/master/sudo — deduplicated here */
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.toast.show{transform:translateY(0);opacity:1}
.modal-overlay.show{display:flex}

/* ── Arabic / RTL typography (centralized) ─────────── */
html[lang="ar"],
html[dir="rtl"] {
  --brand-font:   var(--brand-font-ar);
  --f1:           var(--brand-font-ar);
  --f2:           var(--brand-font-ar);
  --f-display:    var(--brand-font-ar);
  --f-body:       var(--brand-font-ar);
  --font-display: var(--brand-font-ar);
}
/* Direct font-family for pages using Tailwind classes
   (class-based font-family ignores CSS var inheritance) */
html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, sans-serif;
}

/* ── Accessibility ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brand-blue, #4B8BFF); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}