/* ============================================================
   LCR MANDAL ERP — DESIGN SYSTEM
   Core tokens, typography, reset, utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cinzel:wght@400;600;700&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  /* Brand Colors */
  --primary:           #B71C1C;
  --primary-dark:      #7F0000;
  --primary-mid:       #C62828;
  --primary-light:     #FFCDD2;
  --primary-lighter:   #FFF5F5;
  --primary-alpha:     rgba(183, 28, 28, 0.08);

  /* Gold Accent */
  --gold:              #D4AF37;
  --gold-dark:         #A68A1A;
  --gold-light:        #F5E8A0;
  --gold-lighter:      #FFFBEA;
  --gold-alpha:        rgba(212, 175, 55, 0.15);

  /* Neutral Backgrounds */
  --bg:                #F7F8FA;
  --bg-secondary:      #F0F2F5;
  --surface:           #FFFFFF;
  --surface-raised:    #FFFFFF;
  --surface-overlay:   rgba(255,255,255,0.92);

  /* Text */
  --text:              #1A1A2E;
  --text-secondary:    #4B5563;
  --text-muted:        #9CA3AF;
  --text-disabled:     #D1D5DB;
  --text-inverse:      #FFFFFF;

  /* Border */
  --border:            #E5E7EB;
  --border-strong:     #D1D5DB;
  --border-focus:      var(--primary);

  /* Semantic Colors */
  --success:           #16A34A;
  --success-light:     #DCFCE7;
  --success-alpha:     rgba(22,163,74,0.12);
  --warning:           #D97706;
  --warning-light:     #FEF3C7;
  --warning-alpha:     rgba(217,119,6,0.12);
  --danger:            #DC2626;
  --danger-light:      #FEE2E2;
  --danger-alpha:      rgba(220,38,38,0.12);
  --info:              #2563EB;
  --info-light:        #DBEAFE;
  --info-alpha:        rgba(37,99,235,0.12);

  /* Sidebar */
  --sidebar-bg:        #1A0A0A;
  --sidebar-text:      rgba(255,255,255,0.75);
  --sidebar-text-active: #FFFFFF;
  --sidebar-hover:     rgba(183,28,28,0.25);
  --sidebar-active:    rgba(183,28,28,0.4);
  --sidebar-width:     260px;
  --topbar-height:     64px;

  /* Spacing (8px grid) */
  --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;

  /* Border Radius */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
  --shadow:      0 4px 16px rgba(0,0,0,0.08);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.14);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.18);
  --shadow-gold: 0 4px 20px rgba(212,175,55,0.3);
  --shadow-primary: 0 4px 20px rgba(183,28,28,0.3);

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Cinzel', serif;
  --font-mono:  'SF Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   30px;
  --text-5xl:   36px;

  /* Font Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Line Heights */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  /* Z-indices */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      220ms;
  --duration-slow: 380ms;
}

/* Dark mode overrides (future) */
[data-theme="dark"] {
  --bg:                #0F0F14;
  --bg-secondary:      #16161F;
  --surface:           #1E1E2A;
  --surface-raised:    #252535;
  --text:              #F9FAFB;
  --text-secondary:    #9CA3AF;
  --border:            #2D2D3D;
  --border-strong:     #3D3D50;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* ── Typography Scale ───────────────────────────────────────── */
.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}
.heading-1 { font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.heading-2 { font-size: var(--text-2xl); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.heading-3 { font-size: var(--text-xl);  font-weight: var(--fw-semi); line-height: var(--lh-snug); }
.heading-4 { font-size: var(--text-lg);  font-weight: var(--fw-semi); line-height: var(--lh-base); }
.body-lg   { font-size: var(--text-md);  font-weight: var(--fw-regular); line-height: var(--lh-relaxed); }
.body      { font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-base); }
.body-sm   { font-size: var(--text-sm);  font-weight: var(--fw-regular); line-height: var(--lh-base); }
.caption   { font-size: var(--text-xs);  font-weight: var(--fw-medium); line-height: var(--lh-base); }
.label     { font-size: var(--text-xs);  font-weight: var(--fw-semi); letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Utility Classes ────────────────────────────────────────── */
.text-primary   { color: var(--primary); }
.text-gold      { color: var(--gold); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }

.fw-medium  { font-weight: var(--fw-medium); }
.fw-semi    { font-weight: var(--fw-semi); }
.fw-bold    { font-weight: var(--fw-bold); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--space-2); }
.gap-3       { gap: var(--space-3); }
.gap-4       { gap: var(--space-4); }
.gap-6       { gap: var(--space-6); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.rounded     { border-radius: var(--radius); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Selection */
::selection { background: var(--primary-light); color: var(--primary-dark); }