/* ============================================================
   HorizonWest Development — Design Tokens
   Land development / acquisition. Warm sunset, deep navy/charcoal,
   muted gold/sand, clean cream surfaces, parcel-line accents.
   ============================================================ */

:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem;   --radius-full: 9999px;

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1240px;

  /* Fonts */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'General Sans', 'Inter', system-ui, sans-serif;

  --transition: 240ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- LIGHT THEME (cream / sand / navy) ---- */
  --color-bg: #f6f1e7;            /* warm cream */
  --color-surface: #fbf7ef;       /* lighter cream card */
  --color-surface-2: #ffffff;
  --color-surface-offset: #efe7d6; /* sand */
  --color-surface-sunken: #e7dcc6;
  --color-divider: #ddd0b8;
  --color-border: #d2c3a6;

  --color-ink: #1b2433;           /* deep navy ink */
  --color-text: #2a3343;
  --color-text-muted: #5f6878;
  --color-text-faint: #97917f;
  --color-text-inverse: #f8f3e9;

  /* Brand navy/charcoal */
  --color-navy: #15202e;
  --color-navy-2: #1d2c3d;
  --color-charcoal: #232a33;

  /* Muted gold / sand accent */
  --color-gold: #b48a3c;
  --color-gold-hover: #9c7430;
  --color-gold-soft: #d9bd84;
  --color-gold-tint: #efe2c4;

  /* Sunset (used sparingly, hero + accents) */
  --color-sunset-1: #e8915a;
  --color-sunset-2: #d3673f;
  --color-sunset-3: #b8462f;

  /* Status */
  --color-pass: #3f7a4f;
  --color-watch: #c08a2e;
  --color-flag: #b14a3c;

  /* Parcel line color */
  --color-grid: rgba(27, 36, 51, 0.10);

  --shadow-sm: 0 1px 2px rgba(27, 36, 51, 0.07);
  --shadow-md: 0 8px 24px rgba(27, 36, 51, 0.10);
  --shadow-lg: 0 24px 60px rgba(27, 36, 51, 0.16);
  --shadow-gold: 0 12px 32px rgba(180, 138, 60, 0.22);

  --hero-overlay: linear-gradient(180deg, rgba(13,19,28,0.30) 0%, rgba(13,19,28,0.55) 55%, rgba(13,19,28,0.82) 100%);
}

/* ---- DARK THEME (deep navy night) ---- */
[data-theme='dark'] {
  --color-bg: #0e161f;
  --color-surface: #15202c;
  --color-surface-2: #1a2735;
  --color-surface-offset: #182430;
  --color-surface-sunken: #0b1219;
  --color-divider: #243343;
  --color-border: #2c3d4f;

  --color-ink: #eef2f6;
  --color-text: #d6dde5;
  --color-text-muted: #94a2b1;
  --color-text-faint: #6a7886;
  --color-text-inverse: #0e161f;

  --color-navy: #0a1118;
  --color-navy-2: #131f2b;
  --color-charcoal: #11181f;

  --color-gold: #d8b063;
  --color-gold-hover: #e6c279;
  --color-gold-soft: #8a6f3c;
  --color-gold-tint: #2a2418;

  --color-sunset-1: #e8915a;
  --color-sunset-2: #d3673f;
  --color-sunset-3: #c5543a;

  --color-pass: #6cb079;
  --color-watch: #d8b063;
  --color-flag: #d77a6b;

  --color-grid: rgba(214, 221, 229, 0.07);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-gold: 0 12px 32px rgba(0,0,0,0.5);

  --hero-overlay: linear-gradient(180deg, rgba(6,10,15,0.45) 0%, rgba(6,10,15,0.66) 55%, rgba(6,10,15,0.92) 100%);
}