/* ==============================================================================
   ELVAFLOW design tokens — single source of truth (see docs/THEME.md)
   Updated to support the official ELVAFLOW DIGITAL brand identity:
   Primary: Cyber Midnight Navy (#001858, #060B12) + Electric Cyan (#00C2CB, #00F5D4)
   Light is the base; dark is redefined twice so "follow system" works:
     1) prefers-color-scheme:dark when no explicit light choice
     2) explicit [data-theme="dark"]
   Change a value here and in docs/THEME.md together.
   ============================================================================== */
:root{
  color-scheme: light;
  --bg:#F8FAFC; 
  --surface:#FFFFFF; 
  --surface-2:#F1F5F9; 
  --surface-3:#E2E8F0;
  --border:#CBD5E1; 
  --border-strong:#94A3B8;
  --text:#0A192F; 
  --muted:#475569; 
  --faint:#64748B;
  
  /* Brand Navy & Electric Cyan */
  --brand-navy:#001858;
  --brand-navy-deep:#0A192F;
  --accent:#008898; 
  --accent-strong:#006D7A; 
  --accent-ink:#FFFFFF;
  --accent-soft:#E0F8F8; 
  --accent-line:#00C2CB;
  
  /* Hardware / Metal GPU & Engine */
  --copper:#D97706; 
  --copper-soft:#FEF3C7;
  --metal:#0284C7;
  --metal-soft:#E0F2FE;
  
  /* Status */
  --ok:#059669; 
  --ok-soft:#D1FAE5;
  --warn:#D97706; 
  --warn-soft:#FEF3C7;
  --danger:#DC2626; 
  --danger-soft:#FEE2E2;
  
  --shadow-1:0 1px 3px rgba(10,25,47,.08), 0 1px 2px rgba(10,25,47,.04);
  --shadow-2:0 12px 32px -12px rgba(10,25,47,.18);
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --rail:248px; --maxw:1220px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:"Noto Sans Thai","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Anuphan","Noto Sans Thai",-apple-system,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#060B12; 
    --surface:#0B1320; 
    --surface-2:#111C2E; 
    --surface-3:#18273E;
    --border:#1E2F47; 
    --border-strong:#2E4668;
    --text:#F1F5F9; 
    --muted:#94A3B8; 
    --faint:#64748B;
    
    /* Brand Navy & Electric Cyan (Glowing in Dark Mode) */
    --brand-navy:#0A2568;
    --brand-navy-deep:#001858;
    --accent:#00C2CB; 
    --accent-strong:#00F5D4; 
    --accent-ink:#001858;
    --accent-soft:rgba(0,194,203,.14); 
    --accent-line:rgba(0,245,212,.35);
    
    /* Hardware / Metal GPU & Engine */
    --copper:#F59E0B; 
    --copper-soft:rgba(245,158,11,.15);
    --metal:#38BDF8;
    --metal-soft:rgba(56,189,248,.15);
    
    /* Status */
    --ok:#34D399; 
    --ok-soft:rgba(52,211,153,.14);
    --warn:#FBBF24; 
    --warn-soft:rgba(251,191,36,.14);
    --danger:#F87171; 
    --danger-soft:rgba(248,113,113,.14);
    
    --shadow-1:0 1px 3px rgba(0,0,0,.5); 
    --shadow-2:0 16px 40px -16px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#060B12; 
  --surface:#0B1320; 
  --surface-2:#111C2E; 
  --surface-3:#18273E;
  --border:#1E2F47; 
  --border-strong:#2E4668;
  --text:#F1F5F9; 
  --muted:#94A3B8; 
  --faint:#64748B;
  
  /* Brand Navy & Electric Cyan (Glowing in Dark Mode) */
  --brand-navy:#0A2568;
  --brand-navy-deep:#001858;
  --accent:#00C2CB; 
  --accent-strong:#00F5D4; 
  --accent-ink:#001858;
  --accent-soft:rgba(0,194,203,.14); 
  --accent-line:rgba(0,245,212,.35);
  
  /* Hardware / Metal GPU & Engine */
  --copper:#F59E0B; 
  --copper-soft:rgba(245,158,11,.15);
  --metal:#38BDF8;
  --metal-soft:rgba(56,189,248,.15);
  
  /* Status */
  --ok:#34D399; 
  --ok-soft:rgba(52,211,153,.14);
  --warn:#FBBF24; 
  --warn-soft:rgba(251,191,36,.14);
  --danger:#F87171; 
  --danger-soft:rgba(248,113,113,.14);
  
  --shadow-1:0 1px 3px rgba(0,0,0,.5); 
  --shadow-2:0 16px 40px -16px rgba(0,0,0,.8);
}

body{background:var(--bg);color:var(--text);font-family:var(--ui);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.mono,code,pre,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}