/* ==========================================================================
   Estate Crafters — Design Tokens
   Import this file first; everything else cascades from these variables.
   ========================================================================== */

/* Fonts — loaded from Google Fonts CDN.
   Substitute by replacing these @import statements with local @font-face rules
   when licensed display type is available (e.g. Canela, GT Super, Tiempos).   */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------------------------------------------------------------------------
     COLOR — primitives
     ------------------------------------------------------------------------- */
  --forest-900: #08271E;
  --forest-800: #0F3D2E;     /* primary brand green */
  --forest-700: #164A39;
  --forest-600: #1F5A44;     /* moss — secondary green, hover fills */
  --forest-500: #2E7357;
  --forest-400: #4F9578;
  --forest-300: #7FB79D;
  --forest-200: #B3D4C4;
  --forest-100: #DCE9E2;
  --forest-50:  #EEF4F0;

  --brass-900: #6E5524;
  --brass-800: #8A6B2F;
  --brass-700: #A4813B;
  --brass-600: #C9A24C;      /* accent — primary brass */
  --brass-500: #D4B062;
  --brass-400: #DEC07F;
  --brass-300: #E8D1A3;
  --brass-200: #F0E0C2;
  --brass-100: #F6ECD7;
  --brass-50:  #FBF6EA;

  --ink-900: #0B0F0D;        /* body text on light */
  --ink-800: #1A201D;
  --ink-700: #2D3532;
  --ink-600: #4A5450;
  --ink-500: #6C7571;
  --ink-400: #8E9793;
  --ink-300: #B2BAB6;
  --ink-200: #D1D6D3;
  --ink-100: #E5E8E6;

  --paper:      #F7F4EE;     /* primary light surface */
  --paper-soft: #FBFAF5;
  --bone:       #E8E1D3;     /* secondary surface / dividers */
  --bone-2:     #D9D0BE;
  --white:      #FFFFFF;

  --clay-600: #A8623A;       /* tertiary accent */
  --clay-500: #C27A52;

  /* Semantic colors */
  --success: #15803D;
  --warning: #B45309;
  --danger:  #B91C1C;
  --info:    #1E5AA8;

  /* -------------------------------------------------------------------------
     COLOR — semantic roles (light mode default)
     ------------------------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-soft:       var(--paper-soft);
  --bg-alt:        var(--bone);
  --bg-inverse:    var(--forest-800);

  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-600);
  --fg-subtle:     var(--ink-400);
  --fg-inverse:    var(--paper);
  --fg-on-accent:  var(--forest-900);

  --border:        rgba(11, 15, 13, 0.08);
  --border-strong: rgba(11, 15, 13, 0.16);
  --border-inverse:rgba(255, 255, 255, 0.10);

  --accent:        var(--brass-600);
  --accent-hover:  var(--brass-700);
  --primary:       var(--forest-800);
  --primary-hover: var(--forest-700);

  /* -------------------------------------------------------------------------
     SPACING — 4/8 rhythm
     ------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;
  --space-11:160px;

  /* -------------------------------------------------------------------------
     RADII
     ------------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* -------------------------------------------------------------------------
     SHADOWS — warm-tinted, never pure black
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(11, 15, 13, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 15, 13, 0.06), 0 1px 3px rgba(11, 15, 13, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 15, 13, 0.08), 0 2px 4px rgba(11, 15, 13, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 15, 13, 0.12), 0 4px 8px rgba(11, 15, 13, 0.06);
  --shadow-xl: 0 24px 60px rgba(11, 15, 13, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* house curve (ease-out-quint) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY — families + weights + scales
     ------------------------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* Type scale — major third (1.25) on a 16px base */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  84px;
  --fs-6xl: 112px;

  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: -0.005em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;
}

/* -------------------------------------------------------------------------
   DARK MODE — forest becomes the ground
   ------------------------------------------------------------------------- */
.dark, [data-theme="dark"] {
  --bg:            var(--forest-900);
  --bg-soft:       var(--forest-800);
  --bg-alt:        var(--forest-700);
  --bg-inverse:    var(--paper);

  --fg:            var(--paper);
  --fg-muted:      var(--forest-200);
  --fg-subtle:     var(--forest-300);
  --fg-inverse:    var(--ink-900);

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --primary:       var(--brass-600);
  --primary-hover: var(--brass-500);
}

/* ==========================================================================
   SEMANTIC CLASSES
   ========================================================================== */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-base); line-height: var(--lh-normal); letter-spacing: var(--tracking-normal); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
h6, .h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.lede {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.pull-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-hover);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.925em;
  font-variant-numeric: tabular-nums;
}

a, .link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
a:hover, .link:hover { color: var(--accent-hover); border-bottom-color: var(--accent); }

/* Utility — numerals in prices, stats */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }