/* ═══════════════════════════════════════════════════════════════════
   VELTRIX OS — Theme & Design Tokens
   Edit kayu pan color/font/spacing change karva mate aa j file edit karo
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND COLORS ─── */
  --brand-primary:    #C86230;   /* VELTRIX Orange */
  --brand-primary-2:  #E0824A;   /* Lighter orange */
  --brand-dark:       #1A1916;   /* Deep navy/charcoal */
  --brand-gold:       #D4A847;   /* Accent gold */

  /* ─── BACKGROUND (Light Mode) ─── */
  --bg:               #F7F6F2;
  --bg-2:             #EEECEA;
  --surface:          #FFFFFF;
  --surface-2:        #F3F1ED;

  /* ─── BORDERS ─── */
  --border:           #E5E2DB;
  --border-2:         #D8D4CC;

  /* ─── TEXT ─── */
  --text:             #18170F;
  --text-2:           #5C5849;
  --text-3:           #A09A8F;

  /* ─── ACCENT BACKGROUNDS ─── */
  --acc-bg:           #FEF1E8;
  --acc-light:        #FEF8F4;

  /* ─── SEMANTIC COLORS ─── */
  --green:            #2A7A50;
  --green-bg:         #EAF5EE;
  --green-light:      #F3FAF5;
  --red:              #C13B2E;
  --red-bg:           #FDECEA;
  --red-light:        #FEF6F5;
  --amber:            #A06B10;
  --amber-bg:         #FEF6E0;
  --amber-light:      #FFFBF0;
  --blue:             #1A5FA0;
  --blue-bg:          #E8F0FA;
  --blue-light:       #F3F7FD;

  /* ─── RADIUS ─── */
  --r-sm:             6px;
  --r-md:             10px;
  --r-lg:             14px;
  --r-xl:             18px;

  /* ─── SHADOWS ─── */
  --sh-sm:            0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --sh-md:            0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --sh-lg:            0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);

  /* ─── LAYOUT ─── */
  --sidebar-w:        240px;
  --topbar-h:         56px;

  /* ─── FONTS ─── */
  --font-display:     'Sora', -apple-system, sans-serif;
  --font-body:        'DM Sans', -apple-system, sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  /* ─── TRANSITIONS ─── */
  --t-fast:           0.12s ease;
  --t-base:           0.2s ease;
  --t-slow:           0.4s ease;
}

/* ═══ DARK MODE ═══ */
[data-theme="dark"] {
  --bg:               #0F0E0B;
  --bg-2:             #171612;
  --surface:          #1C1B17;
  --surface-2:        #232219;

  --border:           #2C2B24;
  --border-2:         #3A382F;

  --text:             #F2EFE6;
  --text-2:           #A8A398;
  --text-3:           #6A6660;

  --brand-primary:    #E07840;
  --brand-primary-2:  #F09258;
  --acc-bg:           #281808;
  --acc-light:        #1E1208;

  --green:            #3DA068;
  --green-bg:         #0A2018;
  --green-light:      #0D2A1D;
  --red:              #E05040;
  --red-bg:           #280C0A;
  --red-light:        #200A08;
  --amber:            #D49020;
  --amber-bg:         #281A04;
  --amber-light:      #1E1404;
  --blue:             #4A8AD0;
  --blue-bg:          #0A1A28;
  --blue-light:       #0C1E30;

  --sh-sm:            0 1px 2px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --sh-md:            0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  --sh-lg:            0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}