/* ============================================================
   MODERN TILES LTD — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
  /* Primary — Deep Slate */
  --brand-slate-900: #0F2232;
  --brand-slate-800: #1E3A4A;  /* ← main brand color */
  --brand-slate-700: #2A4E62;
  --brand-slate-600: #35627A;
  --brand-slate-500: #447892;
  --brand-slate-400: #6A9BB5;
  --brand-slate-300: #96BDD0;
  --brand-slate-200: #C2D9E6;
  --brand-slate-100: #E2EEF5;
  --brand-slate-50:  #F1F7FA;

  /* Accent — Terracotta */
  --brand-terra-900: #6B2A0E;
  --brand-terra-800: #8F3A18;
  --brand-terra-700: #A84D24;
  --brand-terra-600: #C5622C;  /* ← main accent */
  --brand-terra-500: #D97842;
  --brand-terra-400: #E8935D;
  --brand-terra-300: #F2B08A;
  --brand-terra-200: #F8CEB4;
  --brand-terra-100: #FCE6D7;
  --brand-terra-50:  #FEF5EF;

  /* ============================================================
     NEUTRAL SCALE (warm grays)
     ============================================================ */
  --neutral-950: #1A1614;
  --neutral-900: #2A2420;
  --neutral-800: #3D3630;
  --neutral-700: #524940;
  --neutral-600: #6B6158;
  --neutral-500: #857870;
  --neutral-400: #A09288;
  --neutral-300: #BCADA4;
  --neutral-200: #D6CBC4;
  --neutral-100: #EBE5DF;
  --neutral-50:  #F7F4F0;
  --neutral-0:   #FFFFFF;

  /* ============================================================
     SEMANTIC / STATUS COLORS
     ============================================================ */
  /* Success */
  --success-900: #0F3D24;
  --success-700: #1A6B45;
  --success-500: #2E9B64;
  --success-300: #7DCBA0;
  --success-100: #DDFAED;
  --success-50:  #F0FDF6;

  /* Warning */
  --warning-900: #5C2E00;
  --warning-700: #A05C08;
  --warning-500: #D48A18;
  --warning-300: #F2C96A;
  --warning-100: #FEF3E2;
  --warning-50:  #FFFBF0;

  /* Danger */
  --danger-900: #7A0E0E;
  --danger-700: #B91C1C;
  --danger-500: #E03131;
  --danger-300: #F59898;
  --danger-100: #FEF2F2;
  --danger-50:  #FFF8F8;

  /* Info */
  --info-900: #0D2B6A;
  --info-700: #1750A0;
  --info-500: #2B72D8;
  --info-300: #80AEED;
  --info-100: #EFF4FF;
  --info-50:  #F5F8FF;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Backgrounds */
  --bg-base:        var(--neutral-50);      /* page background */
  --bg-surface:     var(--neutral-0);       /* card / panel */
  --bg-surface-alt: #FDFCFA;               /* subtle alt surface */
  --bg-overlay:     rgba(15,34,50,.48);    /* modal scrim */
  --bg-sidebar:     var(--brand-slate-800);
  --bg-sidebar-hover: rgba(255,255,255,.08);
  --bg-sidebar-active: rgba(255,255,255,.14);

  /* Text */
  --fg-1: var(--neutral-950);   /* primary text */
  --fg-2: var(--neutral-600);   /* secondary text */
  --fg-3: var(--neutral-400);   /* muted / placeholder */
  --fg-inverse: var(--neutral-0);
  --fg-brand: var(--brand-slate-800);
  --fg-accent: var(--brand-terra-600);

  /* Borders */
  --border-default: #E4DED6;
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-slate-600);
  --border-accent:  var(--brand-terra-600);

  /* Interactive */
  --btn-primary-bg:     var(--brand-slate-800);
  --btn-primary-hover:  var(--brand-slate-700);
  --btn-primary-text:   var(--neutral-0);
  --btn-accent-bg:      var(--brand-terra-600);
  --btn-accent-hover:   var(--brand-terra-700);
  --btn-ghost-hover:    rgba(30,58,74,.06);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26,22,20,.05);
  --shadow-sm: 0 1px 4px rgba(26,22,20,.08);
  --shadow-md: 0 4px 12px rgba(26,22,20,.10);
  --shadow-lg: 0 8px 32px rgba(26,22,20,.14);
  --shadow-xl: 0 16px 48px rgba(26,22,20,.18);

  /* Border Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Spacing (8px 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;
  --space-20: 80px;

  /* Layout */
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --content-padding: 24px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

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

  /* Font Families */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Figtree', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.1em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY ELEMENTS
   ============================================================ */

/* Display sizes (Outfit, used for KPIs, big numbers, empty states) */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Headings */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

/* Labels / UI Text */
.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

/* Code / Mono */
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}