/* Hard Asset — design tokens
   Property management for Nigerian landlords.
   Single source of truth for color, type, spacing, radii, shadows. */

/* ---------- Fonts ---------- */
/* Substitution flag: loaded from Google Fonts CDN.
   Display: Instrument Serif (signature italic)
   Body/UI: Geist
   Mono:    Geist Mono */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: brand ---------- */
  --earth: #B6451F;          /* primary action / brand */
  --earth-700: #93371A;      /* hover */
  --earth-800: #722A13;      /* press */
  --earth-100: #F3DCD2;      /* tint, badges */
  --earth-50:  #FAEFE9;      /* very light fill */

  --vault: #143828;          /* financial / positive */
  --vault-700: #0E2A1E;
  --vault-800: #081A12;
  --vault-100: #D2E0D8;
  --vault-50:  #ECF1EE;

  --sun: #C99845;            /* gold value accent */
  --sun-100: #F3E4C5;

  --flag: #8B2415;           /* danger / overdue */
  --flag-100: #EFD1CB;

  --river: #2B5E7A;          /* info */
  --river-100: #D2DFE6;

  /* ---------- Color: neutral (warm) ---------- */
  --paper: #F5EFE6;          /* default surface */
  --paper-dim: #ECE5D8;      /* alt section */
  --white: #FFFFFF;          /* elevated card */
  --ink: #1B1714;            /* primary text */
  --ink-2: #3A332C;          /* secondary text on dark */
  --stone: #6B635A;          /* secondary text */
  --stone-2: #948B82;        /* tertiary text */
  --edge: #E5DDD0;           /* hairline border */
  --edge-strong: #D3C8B5;    /* emphasised hairline */
  --scrim: rgba(27, 23, 20, 0.6);

  /* ---------- Semantic ---------- */
  --bg: var(--paper);
  --bg-elevated: var(--white);
  --bg-alt: var(--paper-dim);
  --bg-dark: var(--vault);
  --bg-dark-elevated: #1B4732;

  --fg: var(--ink);
  --fg-muted: var(--stone);
  --fg-faint: var(--stone-2);
  --fg-on-dark: #F5EFE6;
  --fg-on-earth: var(--paper);

  --border: var(--edge);
  --border-strong: var(--edge-strong);

  --action: var(--earth);
  --action-hover: var(--earth-700);
  --action-press: var(--earth-800);

  --success: var(--vault);
  --warning: var(--sun);
  --danger: var(--flag);
  --info: var(--river);

  /* ---------- Type families ---------- */
  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (base 16) ---------- */
  --fs-display-xl: 72px;     /* marketing hero */
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-display-sm: 32px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 12px;
  --fs-mono: 13px;

  --lh-display: 1.05;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  --lt-display: -0.02em;
  --lt-tight: -0.01em;
  --lt-normal: 0;
  --lt-loose: 0.02em;
  --lt-caps: 0.08em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing (8-point base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 120px;

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(27, 23, 20, 0.04), 0 4px 16px rgba(27, 23, 20, 0.06);
  --shadow-2: 0 4px 12px rgba(27, 23, 20, 0.08), 0 16px 40px rgba(27, 23, 20, 0.10);
  --shadow-inset-hairline: inset 0 0 0 1px var(--edge);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --gutter-mobile: 16px;
  --gutter-web: 32px;
  --max-w-content: 1280px;
  --max-w-prose: 680px;
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

/* ---------- Semantic typography ---------- */
.t-display-xl, h1.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--lt-display);
  font-weight: 400;
  font-style: italic;
}

.t-display-lg {
  font-family: var(--font-serif);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--lt-display);
  font-weight: 400;
}

.t-display-md {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--lt-display);
  font-weight: 400;
}

.t-display-sm {
  font-family: var(--font-serif);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--lt-display);
  font-weight: 400;
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--lt-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--lt-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.t-xs, small {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--lt-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-feature-settings: "tnum";
}

.t-amount {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: var(--lt-tight);
  font-weight: var(--fw-semibold);
}

.t-amount-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

a {
  color: var(--river);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-std);
}
a:hover { opacity: 0.7; }