/* ============================================================
   RAFTAR ERP — DESIGN TOKENS
   Single source of truth for all visual values.
   Edit here to retheme the entire app.
   Never hardcode hex colors anywhere else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {

  /* ── TEAL SCALE ── */
  --teal-50:   #E3FDFD;
  --teal-100:  #CBF1F5;
  --teal-200:  #A6E3E9;
  --teal-400:  #71C9CE;
  --teal-600:  #3DBDC4;
  --teal-700:  #2EA8AF;
  --teal-900:  #1A6B70;

  /* ── PAGE & SURFACE ── */
  --color-page-bg:      #F0FAFA;
  --color-surface:      #FFFFFF;
  --color-surface-tint: #F7FCFC;
  --color-white:        #FFFFFF;

  /* ── TEXT ── */
  --color-text-dark:  #1A3A3A;
  --color-text-mid:   #3D6B6B;
  --color-text-muted: #7AABAB;

  /* ── SEMANTIC ── */
  --color-success:        #2EAF7D;
  --color-success-bg:     #D1F5E8;
  --color-success-border: #86DFB8;
  --color-warning:        #E8943A;
  --color-warning-bg:     #FDF0E0;
  --color-warning-border: #F5C890;
  --color-danger:         #E05C5C;
  --color-danger-bg:      #FDE8E8;
  --color-danger-border:  #F5C6C6;
  --color-info:           #3DBDC4;
  --color-info-bg:        #E3FDFD;

  /* ── SIDEBAR ── */
  --color-sidebar-bg:          var(--teal-100);
  --color-sidebar-border:      var(--teal-200);
  --color-sidebar-text:        var(--color-text-mid);
  --color-sidebar-text-active: var(--color-white);
  --color-sidebar-bg-active:   var(--teal-600);
  --color-sidebar-bg-hover:    rgba(255,255,255,0.5);

  /* ── HEADER ── */
  --color-header-bg:     var(--teal-100);
  --color-header-border: var(--teal-200);

  /* ── BORDERS ── */
  --border-color:  var(--teal-100);
  --border-focus:  var(--teal-600);

  /* ── TYPOGRAPHY ── */
  --font-sans:      'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:      'DM Mono', 'Consolas', 'Courier New', monospace;
  --text-xs:        11px;
  --text-sm:        12px;
  --text-base:      13px;
  --text-md:        14px;
  --text-lg:        16px;
  --text-xl:        20px;
  --text-2xl:       24px;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --leading-base:   1.6;
  --leading-tight:  1.3;
  --leading-none:   1;

  /* ── SPACING (4px base grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-2xl:  12px;
  --radius-full: 9999px;

  /* ── SHADOWS (teal-tinted — grey shadows look wrong on teal bg) ── */
  --shadow-sm: 0 2px 12px rgba(113, 201, 206, 0.15);
  --shadow-md: 0 4px 24px rgba(113, 201, 206, 0.22);
  --shadow-lg: 0 8px 32px rgba(113, 201, 206, 0.28);

  /* ── LAYOUT ── */
  --sidebar-width:     210px;
  --sidebar-collapsed: 60px;
  --header-height:     48px;
  --content-padding:   24px;

  /* ── COMPONENT SIZES ── */
  --btn-height:       36px;
  --btn-height-sm:    30px;
  --input-height:     36px;
  --input-height-sm:  30px;
  --touch-min:        44px;    /* mobile minimum touch target */

  /* ── Z-INDEX ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── TRANSITIONS ── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

}