/* ============================================================
   Muntello Admin Design System — Design Tokens
   ------------------------------------------------------------
   All design variables for the system. Loaded AFTER Bootstrap
   and BEFORE components.css. Components reference only the
   semantic aliases (--accent, --bg, etc.), never the raw
   palette directly — this lets us re-skin the system by
   changing a single line.
   ============================================================ */

:root {

  /* ----- Raw palette — neutrals ----- */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ----- Raw palette — accent (Dark Teal) ----- */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;   /* primary accent */
  --teal-800: #115e59;   /* hover */
  --teal-900: #134e4a;   /* active / pressed */

  /* ----- Raw palette — semantic colors ----- */
  --success-500: #10b981;
  --success-100: #d1fae5;
  --success-700: #047857;

  --warning-500: #f59e0b;
  --warning-100: #fef3c7;
  --warning-700: #b45309;

  --danger-500:  #ef4444;
  --danger-100:  #fee2e2;
  --danger-700:  #b91c1c;

  --info-500:    #3b82f6;
  --info-100:    #dbeafe;
  --info-700:    #1d4ed8;


  /* ============================================================
     SEMANTIC ALIASES — what components reference
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg:            var(--gray-50);
  --surface:       #fff;
  --surface-alt:   var(--gray-50);   /* table headers, sections inside cards */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  /* Text */
  --text:          var(--gray-900);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  #fff;

  /* Accent */
  --accent:        var(--teal-700);
  --accent-hover:  var(--teal-800);
  --accent-active: var(--teal-900);
  --accent-soft:   var(--teal-100);
  --accent-text:   var(--teal-800);

  /* Semantic aliases */
  --success:       var(--success-500);
  --success-soft:  var(--success-100);
  --success-text:  var(--success-700);

  --warning:       var(--warning-500);
  --warning-soft:  var(--warning-100);
  --warning-text:  var(--warning-700);

  --danger:        var(--danger-500);
  --danger-soft:   var(--danger-100);
  --danger-text:   var(--danger-700);

  --info:          var(--info-500);
  --info-soft:     var(--info-100);
  --info-text:     var(--info-700);


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   24px;
  --text-3xl:   30px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  --leading-tight:    1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;


  /* ============================================================
     SPACING (4px scale)
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;


  /* ============================================================
     RADII
     ============================================================ */

  --radius-sm:    6px;
  --radius-md:    8px;    /* buttons, inputs */
  --radius-lg:    12px;   /* cards */
  --radius-xl:    16px;   /* large blocks */
  --radius-full:  999px;  /* badges, avatars */


  /* ============================================================
     SHADOWS
     ============================================================ */

  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(15, 118, 110, 0.18);  /* accent focus-ring */


  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast: 120ms ease;
  --transition:      180ms ease;
  --transition-slow: 280ms ease;


  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */

  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-modal:     1050;
  --z-popover:   1070;
  --z-toast:     1090;


  /* ============================================================
     LAYOUT
     ============================================================ */

  --sidebar-width:  240px;
  --content-max:    1440px;
}