/* LawGIQ Design System — Color & Type Foundations
   ------------------------------------------------
   The palette is grounded in 4 hues:
     - Bone   #F5F5F5  — page background, calm surface
     - Teal   #76ABAE  — secondary brand, considered, advisory
     - Slate  #303841  — primary ink, authority, type
     - Ember  #FF5722  — single accent, used sparingly
   Everything else (tints, shades, semantics) is derived from these. */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- RAW PALETTE ---------- */
  --bone:   #F5F5F5;
  --teal:   #76ABAE;
  --slate:  #303841;
  --ember:  #FF5722;

  /* Slate scale — derived darker/lighter for ink + chrome */
  --slate-950: #14181D;
  --slate-900: #1C2128;
  --slate-800: #242A32;
  --slate-700: #303841;   /* base slate */
  --slate-600: #455160;
  --slate-500: #5A6878;
  --slate-400: #8090A0;
  --slate-300: #A8B3BF;
  --slate-200: #CFD5DC;
  --slate-100: #E7EAEE;
  --slate-50:  #F2F4F6;

  /* Teal scale */
  --teal-900: #2B4849;
  --teal-700: #4E8487;
  --teal-600: #5F9A9D;
  --teal-500: #76ABAE;   /* base teal */
  --teal-300: #A5C8CA;
  --teal-100: #D8E7E8;
  --teal-50:  #EEF5F5;

  /* Ember scale — used sparingly */
  --ember-700: #C53D14;
  --ember-600: #E14918;
  --ember-500: #FF5722;  /* base ember */
  --ember-300: #FF8A63;
  --ember-100: #FFD9C9;
  --ember-50:  #FFF1EB;

  /* Bone / paper */
  --bone-50:  #FBFBFA;
  --bone:     #F5F5F5;
  --bone-200: #ECECEA;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:           var(--bone);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--bone-200);
  --bg-inverse:   var(--slate-900);
  --bg-tint:      var(--teal-50);     /* subtle teal wash for advisory regions */

  /* ---------- FOREGROUND / TEXT ---------- */
  --fg1:  var(--slate-900);  /* primary text, headings */
  --fg2:  var(--slate-700);  /* body */
  --fg3:  var(--slate-500);  /* secondary, captions */
  --fg4:  var(--slate-400);  /* tertiary, placeholder */
  --fg-on-dark:    #ECEEF1;
  --fg-on-accent:  #FFFFFF;
  --fg-link:       var(--teal-700);

  /* ---------- BORDERS ---------- */
  --border:        var(--slate-100);
  --border-strong: var(--slate-200);
  --border-ink:    var(--slate-700);
  --border-focus:  var(--teal-500);

  /* ---------- BRAND / ACCENT ---------- */
  --brand:         var(--slate-700);
  --brand-soft:    var(--teal-500);
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);

  /* ---------- STATUS (derived, restrained) ---------- */
  --success:      #2F8F6F;
  --success-bg:   #E6F2EC;
  --warning:      #B07A1A;
  --warning-bg:   #FAF1DC;
  --danger:       var(--ember-600);
  --danger-bg:    var(--ember-50);
  --info:         var(--teal-700);
  --info-bg:      var(--teal-50);

  /* ---------- HIGHLIGHT (for cited text in docs) ---------- */
  --highlight:        #FFE9A8;
  --highlight-ember:  #FFE0D2;
  --highlight-teal:   #D8E7E8;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Instrument Serif", "Source Serif 4", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- TYPE SCALE (rem-based) ---------- */
  --t-display-xl: 5.5rem;   /* 88px — marketing hero */
  --t-display-l:  4rem;     /* 64px */
  --t-display-m:  3rem;     /* 48px */
  --t-h1:         2.25rem;  /* 36px */
  --t-h2:         1.75rem;  /* 28px */
  --t-h3:         1.375rem; /* 22px */
  --t-h4:         1.125rem; /* 18px */
  --t-body:       1rem;     /* 16px */
  --t-body-sm:    0.875rem; /* 14px */
  --t-caption:    0.75rem;  /* 12px */
  --t-overline:   0.6875rem;/* 11px */

  /* ---------- LINE-HEIGHTS ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ---------- LETTER SPACING ---------- */
  --tr-tight:    -0.02em;
  --tr-display:  -0.015em;
  --tr-normal:    0;
  --tr-overline:  0.12em;

  /* ---------- WEIGHTS ---------- */
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

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

  /* ---------- RADII ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Restrained — legal product, not floaty. Inks rather than blurs. */
  --shadow-xs:  0 1px 0 rgba(20, 24, 29, 0.04);
  --shadow-sm:  0 1px 2px rgba(20, 24, 29, 0.06), 0 1px 0 rgba(20, 24, 29, 0.03);
  --shadow-md:  0 4px 12px rgba(20, 24, 29, 0.06), 0 1px 2px rgba(20, 24, 29, 0.04);
  --shadow-lg:  0 12px 32px rgba(20, 24, 29, 0.10), 0 2px 6px rgba(20, 24, 29, 0.04);
  --shadow-ring: inset 0 0 0 1px var(--border);
  --shadow-focus: 0 0 0 3px rgba(118, 171, 174, 0.35);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:   120ms;
  --d-base:   180ms;
  --d-slow:   260ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-lg: 1320px;
  --gutter:       24px;
  --header-h:     64px;
}

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

.t-display-xl,
.t-display-l,
.t-display-m {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  color: var(--fg1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-display-xl { font-size: var(--t-display-xl); }
.t-display-l  { font-size: var(--t-display-l); }
.t-display-m  { font-size: var(--t-display-m); }

.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  color: var(--fg1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-semibold);
}
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); font-weight: var(--w-medium); }
.t-h4 { font-size: var(--t-h4); font-weight: var(--w-medium); }

.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: var(--lh-base);
  color: var(--fg2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  line-height: var(--lh-base);
  color: var(--fg3);
}
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--fg2);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--teal-700);
}

/* Editorial body — used in marketing & long-form */
.t-prose {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--fg2);
  letter-spacing: -0.005em;
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */
html { background: var(--bg); color: var(--fg1); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--fg1); margin: 0; }
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--highlight); color: var(--slate-900); }