/* AGG-UAE ERP — Design Tokens
   Source of truth for colors, typography, spacing.
   Edit values here only — never hardcode in component CSS. */

:root {
  /* Surface ramp */
  --bg:            #f5f7fa;
  --bg-2:          #ffffff;
  --bg-3:          #eef2f7;
  --bg-4:          #e1e7ef;

  /* Borders */
  --border:        #dde4ee;
  --border-strong: #c5d0de;

  /* Brand — Steel (primary) */
  --steel:         #1a5fa0;
  --steel-lt:      #3a8fd4;
  --steel-xlt:     #e8f1fb;
  --steel-gl:      rgba(26, 95, 160, 0.15);
  --steel-gl2:     rgba(26, 95, 160, 0.05);

  /* Brand — Gold (secondary) */
  --gold:          #8a6e1a;
  --gold-lt:       #c9a52a;
  --gold-xlt:      #fbf6e6;
  --gold-gl:       rgba(138, 110, 26, 0.12);

  /* Text */
  --text:          #0b1220;
  --text-2:        #445566;
  --text-3:        #8fa8c2;

  /* Status */
  --success:       #1f8f4f;
  --success-bg:    #e6f5ec;
  --warning:       #c47a00;
  --warning-bg:    #fdf3e0;
  --danger:        #c53030;
  --danger-bg:     #fbeaea;
  --info:          #1a5fa0;
  --info-bg:       #e8f1fb;

  /* Gradients */
  --grad-steel:    linear-gradient(135deg, #3a8fd4, #1a5fa0);
  --grad-gold:     linear-gradient(135deg, #c9a52a, #8a6e1a);

  /* Typography */
  --fnt-h:         'Rajdhani', system-ui, sans-serif;
  --fnt-b:         'Outfit', system-ui, sans-serif;

  /* Layout */
  --sidebar-w:           264px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            60px;

  /* Radius */
  --r:             4px;
  --r-lg:          10px;
  --r-pill:        999px;

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(15, 30, 55, 0.08);
  --shadow:        0 4px 16px rgba(15, 30, 55, 0.08);
  --shadow-lg:     0 12px 32px rgba(15, 30, 55, 0.12);

  /* Motion */
  --ease:          cubic-bezier(.4, 0, .2, 1);
  --t-fast:        150ms;
  --t-base:        250ms;
}