/* ============================================================
   Land Registry — Design Tokens
   Institutional / editorial aesthetic: paper, ink, forest green.
   ============================================================ */

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

:root {
  /* ─── Brand — forest green extracted from the farm/field mark ─── */
  --brand-50:  #eef6e8;
  --brand-100: #d7ebca;
  --brand-200: #b1d698;
  --brand-300: #86bd64;
  --brand-400: #5fa33d;
  --brand-500: #3e862a;  /* mid leaf */
  --brand-600: #2d6b1f;
  --brand-700: #1f5130;  /* PRIMARY — deep forest */
  --brand-800: #153a22;
  --brand-900: #0b2413;

  /* Warm secondary — furrow gold (used sparingly) */
  --gold-300: #e8c97a;
  --gold-500: #b88b1e;
  --gold-700: #7a5a0f;

  /* ─── Neutrals — warm paper & ink ─── */
  --paper:       #FAFAF5;   /* page background (light mode)   */
  --paper-soft:  #F3F1EA;   /* card/muted surface             */
  --paper-sunk:  #ECE9DF;   /* inset field                    */
  --line:        #D9D5C7;   /* hairline borders               */
  --line-strong: #B8B3A2;

  --ink:         #0E1511;   /* near-black, slight green cast  */
  --ink-2:       #2A2F2B;
  --ink-3:       #525851;   /* body muted                     */
  --ink-4:       #85897F;   /* caption                        */
  --ink-5:       #AFB1A6;   /* placeholder                    */

  /* ─── Semantic ─── */
  --ok:     #2d6b1f;
  --warn:   #a06b00;
  --danger: #9b2c1f;   /* red-oxide, not pure red */
  --info:   #1d4e66;

  --ok-bg:     #e9f1e4;
  --warn-bg:   #f6ecd3;
  --danger-bg: #f2dcd6;
  --info-bg:   #dbe7ee;

  /* ─── Radii — restrained ─── */
  --r-1: 2px;   /* pills / chips */
  --r-2: 4px;   /* inputs / buttons */
  --r-3: 6px;   /* cards */
  --r-4: 10px;  /* modals */
  --r-pill: 999px;

  /* ─── Elevation — subtle, warm ─── */
  --shadow-1: 0 1px 0 rgba(15,20,12,0.04), 0 1px 2px rgba(15,20,12,0.06);
  --shadow-2: 0 2px 4px rgba(15,20,12,0.06), 0 8px 20px rgba(15,20,12,0.06);
  --shadow-3: 0 4px 8px rgba(15,20,12,0.08), 0 24px 48px rgba(15,20,12,0.10);
  --shadow-inset: inset 0 1px 0 rgba(15,20,12,0.04);

  /* ─── Spacing scale (4px base) ─── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px; --s-11: 96px; --s-12: 128px;

  /* ─── Motion ─── */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ─── Typography families ─── */
  --font-display: 'Spectral', 'Source Serif Pro', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', SFMono-Regular, Menlo, monospace;

  /* ─── Semantic type — each pairs size/leading/tracking/weight ─── */
  /* Editorial, a little airy. Use display for statements; body IBM Plex */

  --t-display-lg: 700 clamp(3rem, 1.2rem + 5vw, 5.25rem) / 1.02 var(--font-display);
  --t-display-md: 600 clamp(2.4rem, 1rem + 3.5vw, 3.75rem) / 1.05 var(--font-display);
  --t-display-sm: 600 clamp(1.75rem, 0.9rem + 2vw, 2.5rem) / 1.1 var(--font-display);

  --t-h1: 600 2.25rem/1.15 var(--font-display);
  --t-h2: 600 1.75rem/1.2 var(--font-display);
  --t-h3: 600 1.375rem/1.25 var(--font-body);
  --t-h4: 600 1.125rem/1.3 var(--font-body);

  --t-body-lg: 400 1.0625rem/1.65 var(--font-body);
  --t-body:    400 0.9375rem/1.6 var(--font-body);
  --t-body-sm: 400 0.8125rem/1.55 var(--font-body);

  --t-label:     600 0.75rem/1.4 var(--font-body);          /* buttons, dense UI */
  --t-eyebrow:   600 0.6875rem/1.3 var(--font-body);        /* UPPERCASE overlines */
  --t-caption:   400 0.75rem/1.4 var(--font-body);
  --t-mono:      500 0.8125rem/1.55 var(--font-mono);       /* company #s, title refs */
  --t-mono-sm:   500 0.6875rem/1.4 var(--font-mono);
}

/* ============================================================
   Base elements — sensible defaults, no reset blast
   ============================================================ */

html { color-scheme: light; }
body {
  margin: 0;
  font: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); letter-spacing: -0.015em; margin: 0; color: var(--ink); }
h2 { font: var(--t-h2); letter-spacing: -0.01em;  margin: 0; color: var(--ink); }
h3 { font: var(--t-h3); letter-spacing: -0.005em; margin: 0; color: var(--ink); }
h4 { font: var(--t-h4); margin: 0; color: var(--ink); }
p  { margin: 0; color: var(--ink-2); }

a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-800); }

small, .caption { font: var(--t-caption); color: var(--ink-3); }

code, kbd, .mono { font: var(--t-mono); }

/* Uppercase overline / eyebrow */
.eyebrow {
  font: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* Editorial rule used to section content */
.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.rule-strong { border-top-color: var(--line-strong); }
.rule-brand  { border-top: 2px solid var(--brand-700); }

/* Tabular numerics for data-heavy UI (tables, prices, counts) */
.tabular { font-variant-numeric: tabular-nums; }

/* Selection */
::selection { background: var(--brand-100); color: var(--brand-900); }

/* Focus ring — institutional, high contrast */
:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: 2px;
}