/* =====================================================================
   Design tokens — dark is the default, light overrides via [data-theme].
   Visual direction: slate-gray surfaces + warm orange accent
   (inspired by the finance dashboard reference, Exemple_UI_04).
   ===================================================================== */

:root,
[data-theme="dark"] {
  --bg:            #171b21;
  --bg-elevated:   #1b2027;
  --panel:         #232a33;
  --panel-2:       #29323d;
  --panel-hover:   #2c3540;
  --border:        #333c47;
  --border-soft:   #2a323c;

  --text:          #e8ecf1;
  --text-muted:    #8a94a6;
  --text-faint:    #626c7d;

  --accent:        #e8933a;   /* orange */
  --accent-hover:  #f0a44f;
  --accent-press:  #d97f26;
  --accent-soft:   rgba(232, 147, 58, 0.14);

  --info:          #5b8def;   /* pastel blue */
  --info-soft:     rgba(91, 141, 239, 0.14);
  --success:       #3fb6a8;   /* teal */
  --success-soft:  rgba(63, 182, 168, 0.14);
  --danger:        #e5484d;
  --danger-soft:   rgba(229, 72, 77, 0.14);
  --warning:       #e8b339;
  --warning-soft:  rgba(232, 179, 57, 0.14);

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:     0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.45);

  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     16px;

  --sidebar-w:     248px;
  --topbar-h:      66px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #eef1f6;
  --bg-elevated:   #f6f8fb;
  --panel:         #ffffff;
  --panel-2:       #f7f9fc;
  --panel-hover:   #f0f3f8;
  --border:        #e2e7ef;
  --border-soft:   #eef1f6;

  --text:          #1e2530;
  --text-muted:    #64707f;
  --text-faint:    #94a0b0;

  --accent:        #d97f26;
  --accent-hover:  #e8933a;
  --accent-press:  #c06f1f;
  --accent-soft:   rgba(217, 127, 38, 0.12);

  --info:          #3f6fd4;
  --info-soft:     rgba(63, 111, 212, 0.10);
  --success:       #2a9d8f;
  --success-soft:  rgba(42, 157, 143, 0.12);
  --danger:        #d63b40;
  --danger-soft:   rgba(214, 59, 64, 0.10);
  --warning:       #c9942a;
  --warning-soft:  rgba(201, 148, 42, 0.12);

  --shadow-sm:     0 1px 2px rgba(30, 41, 59, 0.06);
  --shadow-md:     0 6px 18px rgba(30, 41, 59, 0.08);
  --shadow-lg:     0 16px 40px rgba(30, 41, 59, 0.12);

  color-scheme: light;
}