/* =============================================================
   DESIGN SYSTEM — TOKENS  (the ONE place to change the look)
   Gold & Jewelry ERP · Frontend Modernization
   -------------------------------------------------------------
   Change a value here and it propagates across the whole app.
   Nothing else should hardcode a color / radius / shadow.
   ============================================================= */

:root {
  /* ----------------------------------------------------------
     BRAND · PRIMARY (kept blue, refined)
     ---------------------------------------------------------- */
  --primary: #007bff;          /* existing AdminLTE blue — preserved meaning   */
  --primary-hover: #0069d9;    /* hover / active state                         */
  --primary-active: #0056b3;   /* pressed                                      */
  --primary-soft: rgba(0, 123, 255, 0.10);  /* tinted backgrounds / focus ring */
  --primary-contrast: #ffffff; /* text/icon on top of primary                  */

  /* ----------------------------------------------------------
     ACCENT (theme picker) — the ONE colour the user chooses.
     Default = teal (the app's existing dominant accent).
     Re-mapped per palette by :root[data-accent="…"] in themes.css
     ---------------------------------------------------------- */
  --accent: #17a2b8;
  --accent-hover: #138496;
  --accent-active: #0f6674;
  --accent-soft: rgba(23, 162, 184, 0.12);
  --accent-contrast: #ffffff;

  /* ----------------------------------------------------------
     ACCENT · GOLD (jewelry identity — used sparingly)
     ---------------------------------------------------------- */
  --gold: #c9a227;
  --gold-light: #e6c65c;
  --gold-dark: #a5851d;
  --gold-soft: rgba(201, 162, 39, 0.12);

  /* ----------------------------------------------------------
     SEMANTIC (Bootstrap-4 aligned — badges/alerts keep meaning)
     ---------------------------------------------------------- */
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;

  --success-soft: rgba(40, 167, 69, 0.12);
  --info-soft: rgba(23, 162, 184, 0.12);
  --warning-soft: rgba(255, 193, 7, 0.14);
  --danger-soft: rgba(220, 53, 69, 0.12);

  /* ----------------------------------------------------------
     SURFACES & TEXT
     ---------------------------------------------------------- */
  --background: #f4f6f9;       /* app canvas                                   */
  --surface: #ffffff;          /* cards, modals, dropdowns                     */
  --surface-2: #f8f9fa;        /* subtle raised / striped rows                 */
  --surface-hover: #eef4ff;    /* row / item hover (primary-tinted)            */
  --table-row-hover: rgba(0, 110, 255, 0.20);  /* table row hover overlay — translucent so coloured cells keep their hue */

  --text-primary: #2b3445;     /* softened near-black for readability          */
  --text-secondary: #6c757d;
  --text-muted: #9aa4b2;
  --text-on-dark: #e9ecf1;

  --border-color: #e6e9ef;
  --border-strong: #d5dae2;

  /* Neutral (secondary) card headers — refined slate that replaces
     AdminLTE's flat gray. Dark-mode aware (re-mapped in theme.css);
     the leading marker uses --accent so the palette shows through. */
  --header-neutral-bg: #3f4a5c;
  --header-neutral-bg-2: #313b4a;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-base: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-ui: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* ----------------------------------------------------------
     RADIUS
     ---------------------------------------------------------- */
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS  (soft, layered — enterprise feel)
     ---------------------------------------------------------- */
  --shadow-small: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-medium: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-large: 0 12px 32px rgba(16, 24, 40, 0.12);
  --shadow-focus: 0 0 0 3px var(--primary-soft);

  /* ----------------------------------------------------------
     SCROLLBARS  (global, themed — thin & rounded)
     ---------------------------------------------------------- */
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: #c3ccd6;
  --scrollbar-thumb-hover: #9aa6b4;

  /* ----------------------------------------------------------
     MOTION  (subtle · GPU-friendly: transform/opacity only)
     ---------------------------------------------------------- */
  --animation-speed: 200ms;
  --speed-fast: 120ms;
  --speed-slow: 320ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --sidebar-width: 280px;
  --sidebar-collapsed: 4.6rem;
  --navbar-height: 57px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ----------------------------------------------------------
     SIDEBAR  (dark theme — all sidebar visuals key off these)
     ---------------------------------------------------------- */
  --sidebar-bg: #15252c;                        /* matches existing solid bg */
  --sidebar-bg-2: #0f1b21;                       /* nested treeview depth      */
  --sidebar-text: #c3d0d7;                       /* default link text          */
  --sidebar-text-strong: #ffffff;                /* hover / active text        */
  --sidebar-muted: #8397a1;                      /* brand sub, panel meta      */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: var(--primary);           /* active item fill (blue)    */
  --sidebar-active-text: #ffffff;
  --sidebar-header: var(--gold-light);           /* group headers = subtle gold*/
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-item-radius: var(--radius-small);
  --sidebar-item-gap: 2px;
  --sidebar-scrollbar: rgba(255, 255, 255, 0.16);

  /* ----------------------------------------------------------
     APP FOOTER  (dark brand bar — re-mapped per theme)
     ---------------------------------------------------------- */
  --footer-bg: #0a2733;
  --footer-bg-2: #041e28;
  --footer-text: #c3d0d7;
  --footer-text-strong: #e9ecf1;
  --footer-muted: #8ba3ad;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-speed: 0ms;
    --speed-fast: 0ms;
    --speed-slow: 0ms;
  }
}