/* ==========================================================================
   e-Division — Design tokens
   A saffron system built on warm neutrals: authoritative without shouting.
   ========================================================================== */

:root {
  /* ---- Saffron ramp ---------------------------------------------------- */
  --saffron-50:  #FFF7ED;
  --saffron-100: #FFEDD8;
  --saffron-200: #FDD9AF;
  --saffron-300: #FABF7B;
  --saffron-400: #F5A04A;
  --saffron-500: #EE8422;   /* primary */
  --saffron-600: #D96C14;
  --saffron-700: #B45412;
  --saffron-800: #8F4316;
  --saffron-900: #743916;
  --saffron-950: #401B08;

  /* ---- Warm neutrals ---------------------------------------------------- */
  --sand-50:  #FDFBF8;
  --sand-100: #F8F4EE;
  --sand-200: #EFE7DC;
  --sand-300: #E2D6C6;
  --sand-400: #C4B3A0;
  --sand-500: #9C8A76;
  --sand-600: #786A59;
  --sand-700: #5A4F42;
  --sand-800: #3B342C;
  --sand-900: #26211B;
  --sand-950: #17130F;

  /* ---- Semantic --------------------------------------------------------- */
  --teal-500:   #0F8B7E;
  --teal-50:    #E6F5F3;
  --green-600:  #2F7D53;
  --green-50:   #E9F5EE;
  --red-600:    #C2412D;
  --red-50:     #FBEDEA;
  --amber-600:  #B4790C;
  --amber-50:   #FDF4E3;
  --indigo-600: #4A5490;
  --indigo-50:  #EEF0F8;

  /* ---- Applied (light) --------------------------------------------------- */
  --bg:            var(--sand-100);
  --bg-elevated:   #FFFFFF;
  --bg-sunken:     var(--sand-200);
  --bg-hover:      var(--sand-100);
  --surface:       #FFFFFF;
  --surface-alt:   var(--sand-50);

  --text:          var(--sand-900);
  --text-secondary:var(--sand-700);
  --text-muted:    var(--sand-500);
  --text-inverse:  #FFFFFF;

  --border:        var(--sand-300);
  --border-subtle: var(--sand-200);
  --border-strong: var(--sand-400);

  --primary:       var(--saffron-600);
  --primary-hover: var(--saffron-700);
  --primary-soft:  var(--saffron-50);
  --primary-border:var(--saffron-200);
  --on-primary:    #FFFFFF;

  --sidebar-bg:    linear-gradient(178deg, #4A2410 0%, #3A1C0C 45%, #2A1408 100%);
  --sidebar-text:  #E8D9C8;
  --sidebar-muted: #A98B71;
  --sidebar-active-bg: rgba(238, 132, 34, 0.16);
  --sidebar-border:rgba(238, 132, 34, 0.14);

  --topbar-bg:     rgba(255, 255, 255, 0.86);

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(58, 40, 24, 0.05);
  --shadow-sm: 0 1px 3px rgba(58, 40, 24, 0.07), 0 1px 2px rgba(58, 40, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(58, 40, 24, 0.08), 0 1px 3px rgba(58, 40, 24, 0.05);
  --shadow-lg: 0 12px 32px rgba(58, 40, 24, 0.12), 0 2px 8px rgba(58, 40, 24, 0.06);
  --shadow-xl: 0 24px 56px rgba(40, 26, 14, 0.18);
  --ring:      0 0 0 3px rgba(238, 132, 34, 0.22);

  /* ---- Geometry ---------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-full: 999px;

  --sidebar-w: 264px;
  --sidebar-rail: 66px;      /* the menu collapsed to icons */
  --topbar-h: 62px;

  /* ---- Type -------------------------------------------------------------- */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system,
               BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
                  Inter, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-base:13.5px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  21px;
  --fs-2xl: 27px;
  --fs-3xl: 34px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

/* ---- Dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg:            var(--sand-950);
  --bg-elevated:   #201A15;
  --bg-sunken:     #12100D;
  --bg-hover:      #2A231C;
  --surface:       #201A15;
  --surface-alt:   #262019;

  --text:          #F0E7DC;
  --text-secondary:#C4B3A0;
  --text-muted:    #8C7A67;
  --text-inverse:  var(--sand-950);

  --border:        #3A312A;
  --border-subtle: #2C2520;
  --border-strong: #4E433A;

  --primary:       var(--saffron-400);
  --primary-hover: var(--saffron-300);
  --primary-soft:  rgba(238, 132, 34, 0.12);
  --primary-border:rgba(238, 132, 34, 0.28);
  --on-primary:    #2A1408;

  --sidebar-bg:    linear-gradient(178deg, #241710 0%, #1B110A 50%, #140C06 100%);
  --sidebar-text:  #D8C6B4;
  --sidebar-muted: #8C7259;
  --sidebar-active-bg: rgba(245, 160, 74, 0.14);
  --sidebar-border:rgba(245, 160, 74, 0.16);

  --topbar-bg:     rgba(32, 26, 21, 0.86);

  --teal-50:   rgba(15, 139, 126, 0.14);
  --green-50:  rgba(47, 125, 83, 0.14);
  --red-50:    rgba(194, 65, 45, 0.14);
  --amber-50:  rgba(180, 121, 12, 0.14);
  --indigo-50: rgba(120, 132, 200, 0.14);
  --green-600: #4FAE79;
  --red-600:   #E4705A;
  --amber-600: #DFA13C;
  --teal-500:  #35B3A4;
  --indigo-600:#8F99D4;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --ring:      0 0 0 3px rgba(245, 160, 74, 0.26);
}

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