/* ============================================================
   Strato BIM Design System — Color & Typography Tokens
   Brand orange: #D97757 · Type: IBM Plex Sans / IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ============================================================
   FONTS
   ============================================================ */

:root {
  --font-sans:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Weights */
  --fw-regular:   400;   /* @kind font */
  --fw-medium:    500;   /* @kind font */
  --fw-semibold:  600;   /* @kind font */

  /* Scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    24px;
  --text-xl:    32px;
  --text-2xl:   48px;
  --text-3xl:   64px;

  /* Line heights */
  --lh-tight:   1.2;    /* @kind font */
  --lh-snug:    1.35;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
}

/* ============================================================
   COLOR PRIMITIVES
   ============================================================ */

:root {
  /* --- Brand Orange Scale (Anthropic Claude) --- */
  --orange-50:  #FBEEE8;
  --orange-100: #F5D5C5;
  --orange-200: #EFB69E;
  --orange-300: #E69677;
  --orange-400: #DE855F;
  --orange-500: #D97757;   /* ← brand primary */
  --orange-600: #B85E40;
  --orange-700: #8E4731;
  --orange-800: #5C2D1F;
  --orange-900: #2E1610;

  /* --- Warm Neutral Scale --- */
  --neutral-0:   #FAFAF8;   /* page background */
  --neutral-50:  #F4F2EE;   /* section alt bg */
  --neutral-100: #EAE7E1;   /* sidebar / panel bg */
  --neutral-200: #DDD9D1;   /* dividers */
  --neutral-300: #C9C4BA;   /* placeholder borders */
  --neutral-400: #A8A39A;   /* disabled text */
  --neutral-500: #7D7870;   /* secondary text */
  --neutral-600: #4E4A45;   /* body text */
  --neutral-700: #2C2A27;   /* heading / charcoal */
  --neutral-800: #1A1917;   /* near-black */
  --neutral-900: #0F0E0D;

  /* --- Warning (Amber) --- */
  --amber-50:  #FEF6E4;
  --amber-200: #F8D688;
  --amber-500: #C97D10;
  --amber-700: #7A4C08;

  /* --- Error (Muted Red) --- */
  --red-50:  #F9ECEA;
  --red-200: #E8B3AE;
  --red-500: #A63428;
  --red-700: #6B221A;

  /* --- Pure --- */
  --white: #FFFFFF;
  --black: #000000;
}

/* ============================================================
   SEMANTIC TOKENS
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-page:       var(--neutral-0);
  --bg-section:    var(--neutral-50);
  --bg-panel:      var(--neutral-100);
  --bg-card:       var(--white);
  --bg-overlay:    rgba(26, 25, 23, 0.5);

  /* Foregrounds */
  --fg-1:          var(--neutral-800);   /* primary headings */
  --fg-2:          var(--neutral-700);   /* body text */
  --fg-3:          var(--neutral-500);   /* secondary / muted */
  --fg-4:          var(--neutral-400);   /* disabled / placeholder */
  --fg-inverse:    var(--white);

  /* Brand */
  --brand:         var(--orange-500);
  --brand-hover:   var(--orange-600);
  --brand-active:  var(--orange-700);
  --brand-subtle:  var(--orange-50);
  --brand-muted:   var(--orange-100);

  /* Borders */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--orange-500);

  /* State colors */
  --warning:       var(--amber-500);
  --warning-bg:    var(--amber-50);
  --error:         var(--red-500);
  --error-bg:      var(--red-50);
  --success:       var(--orange-500);
  --success-bg:    var(--orange-50);

  /* Interactive */
  --focus-ring:    rgba(217, 119, 87, 0.4);
}

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

:root {
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.12);
  --shadow-4: 0 8px 16px rgba(0,0,0,0.10), 0 16px 48px rgba(0,0,0,0.14);
}

/* ============================================================
   BORDER RADIUS
   ============================================================ */

:root {
  --radius-xs:   3px;   /* badges, chips */
  --radius-sm:   4px;   /* inputs */
  --radius-md:   5px;   /* buttons */
  --radius-lg:   6px;   /* cards, panels */
  --radius-xl:   10px;  /* large cards */
  --radius-full: 9999px;
}

/* ============================================================
   SPACING SCALE (8px base grid)
   ============================================================ */

:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-2);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.body, p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-2);
}

.label-xs {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.code, code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--brand-hover);
}