/* ============================================================
   RentalAnalytics — Design Tokens
   Professional data-intelligence palette: deep slate + teal accent
   ============================================================ */
:root {
  /* Surfaces */
  --bg:           #f7f8f6;     /* Off-white paper */
  --surface:      #ffffff;
  --surface-2:    #f1f3ef;
  --surface-3:    #e7eae5;
  --border:       #d9ddd6;
  --border-2:     #c1c7bd;

  /* Ink */
  --ink:          #11201c;      /* Near-black, slight green */
  --ink-2:        #2a3a35;
  --ink-muted:    #5b6b66;
  --ink-faint:    #8f9994;

  /* Accent — restrained teal */
  --accent:       #136a5f;
  --accent-hover: #0e554c;
  --accent-soft:  #d8e8e3;

  /* Semantic */
  --positive:     #2f7d3a;
  --negative:     #b13b32;
  --warning:      #a87217;
  --info:         #2a5a8c;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-hero: 64px;

  /* Spacing (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17, 32, 28, 0.06);
  --shadow-md: 0 4px 14px rgba(17, 32, 28, 0.08);
  --shadow-lg: 0 12px 30px rgba(17, 32, 28, 0.10);

  /* Layout */
  --container:    1180px;
  --container-md: 880px;
  --container-sm: 680px;
}

@media (prefers-color-scheme: dark) {
  /* Optional dark mode (kept conservative) */
  :root.dark-auto {
    --bg:           #0d1614;
    --surface:      #111c19;
    --surface-2:    #16221f;
    --surface-3:    #1c2a26;
    --border:       #243330;
    --border-2:     #2f4039;
    --ink:          #e7eae5;
    --ink-2:        #c8d0cb;
    --ink-muted:    #8f9994;
    --ink-faint:    #5a6b66;
    --accent:       #4fb6a4;
    --accent-hover: #66c8b6;
    --accent-soft:  #1a3a34;
  }
}