/* ============================================================
   OHOME · Colors & Type foundations
   Primary: forest #0A1F16 · Accent: mint #D5EFC0
   Type: Geist (sans + mono) · DM Sans fallback for body
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');

:root {
  --oho-forest:        #0A1F16;
  --oho-forest-ink:    #061008;
  --oho-forest-80:     #1B3328;
  --oho-forest-60:     #3D554A;
  --oho-mint:          #D5EFC0;
  --oho-mint-soft:     #EAF5DC;
  --oho-mint-deep:     #B9DFA0;
  --oho-mint-ink:      #4E8A30;
  --oho-white:         #FFFFFF;
  --oho-bone:          #F7F5F1;
  --oho-sand:          #EFEAE1;

  --oho-n-900: #0E1512;
  --oho-n-700: #2E352F;
  --oho-n-500: #6C746C;
  --oho-n-300: #BDC3B9;
  --oho-n-200: #DCE0D6;
  --oho-n-100: #ECEEE6;
  --oho-n-050: #F4F5EF;

  --color-bg:          var(--oho-white);
  --color-bg-alt:      var(--oho-bone);
  --color-bg-dark:     var(--oho-forest);
  --color-bg-accent:   var(--oho-mint);
  --color-fg:          var(--oho-forest);
  --color-fg-soft:     var(--oho-forest-60);
  --color-rule:        var(--oho-n-200);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:144px;

  --radius-0:0; --radius-1:2px; --radius-2:6px; --radius-3:12px; --radius-pill:999px;

  --font-sans:   "Geist", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:"Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:   "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-num:    "Geist", "DM Sans", ui-sans-serif, sans-serif;

  --fs-eyebrow:12px; --fs-micro:13px; --fs-body:16px; --fs-lede:22px;
  --fs-h4:24px; --fs-h3:32px; --fs-h2:44px; --fs-h1:64px;
  --fs-display:96px; --fs-display-l:144px;

  --lh-tight:1.0; --lh-snug:1.1; --lh-body:1.5; --lh-relaxed:1.6;
  --tr-wide:0.08em; --tr-caps:0.14em; --tr-normal:0; --tr-tight:-0.02em; --tr-display:-0.045em;
}

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

h1,.h1 { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); margin:0; }
h2,.h2 { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.035em; margin:0; }
h3,.h3 { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h3); line-height:1.15; letter-spacing: var(--tr-tight); margin:0; }
h4,.h4 { font-weight:500; font-size: var(--fs-h4); line-height:1.25; letter-spacing:-0.015em; margin:0; }

p,.body { font-size: var(--fs-body); line-height: var(--lh-body); max-width:62ch; text-wrap:pretty; margin:0; letter-spacing:-0.005em; }
.lede { font-size: var(--fs-lede); line-height:1.3; font-weight:400; letter-spacing:-0.02em; max-width:46ch; }

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight:500; letter-spacing:0.12em; text-transform: uppercase; color: var(--color-fg-soft); }
.micro { font-size: var(--fs-micro); line-height:1.45; color: var(--color-fg-soft); }

.num { font-family: var(--font-num); font-weight:500; font-size: var(--fs-display); line-height:0.85; letter-spacing:-0.055em; font-feature-settings:"tnum","lnum"; }
.num-xl { font-size: var(--fs-display-l); }
.dot { color: var(--oho-mint-deep); }

.rule { border:0; border-top:1px solid var(--color-rule); margin:0; }
.bg-forest{background:var(--oho-forest);color:#fff} .bg-mint{background:var(--oho-mint)} .bg-bone{background:var(--oho-bone)}