/* =========================================================================
   ShepardMesh — Marketing Foundations (LIGHT)
   Built on the ShepardMesh design system tokens, re-pointed to a white,
   instrument-grade light surface for B2B marketing. Outdoor recreation.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- Hull scale (cool deep-water spine) ---- */
  --hull-abyss:#05090D; --hull-900:#0A1119; --hull-800:#0F1822; --hull-700:#16212E;
  --hull-600:#1F2D3D; --hull-500:#2C3E54; --hull-400:#4A5E78; --hull-300:#6B819B;
  --hull-200:#95A8BD; --hull-100:#C4D2E0; --hull-050:#E6ECF2; --hull-000:#F4F7FA;

  /* ---- Signal (Buoy Orange) — the single accent ---- */
  --signal-orange:#FF6A1F; --signal-orange-hi:#FF8A4D; --signal-orange-lo:#C84F12;
  --signal-orange-bg:#FFF1E8;

  /* ---- Status ---- */
  --status-ok:#0E9E7E; --status-ok-bg:#E2F5EF;
  --status-warn:#C98A06; --status-warn-bg:#FBF1DA;
  --status-alert:#E5342A; --status-alert-bg:#FCE6E4;
  --status-info:#1F7FD6; --status-info-bg:#E4F0FB;

  /* ---- Ink (warm near-black, matched to the lockup #1A1208) ---- */
  --ink-900:#1A1208; --ink-800:#2A2114; --ink-700:#3A3122;
  --paper-000:#FFFFFF; --paper-050:#F7F8FA; --paper-100:#EEF1F4; --paper-200:#DDE3E9;

  /* ---- Chart (for the map/console preview) ---- */
  --chart-land:#EAEEF2; --chart-water:#DCE6EE; --chart-grid:#CBD6E0; --chart-track:#FF6A1F;
  --chart-track-ghost:rgba(255,106,31,0.22);

  /* ---- SEMANTIC ROLES — LIGHT marketing default ---- */
  --bg:#FFFFFF;
  --bg-surface:var(--paper-050);
  --bg-raised:#FFFFFF;
  --bg-sunken:var(--paper-100);
  --bg-ink:var(--hull-abyss);      /* dark inversion blocks */

  --fg:var(--ink-900);             /* primary text */
  --fg-muted:#5A6675;              /* secondary text (cool grey) */
  --fg-subtle:#828E9C;             /* tertiary / labels */
  --fg-faint:#A9B3BE;              /* hints, disabled */
  --fg-on-ink:var(--hull-050);     /* text on dark blocks */
  --fg-on-ink-muted:var(--hull-300);

  --border:#E2E7EC;
  --border-strong:#CBD3DB;
  --border-faint:#EEF1F4;
  --border-ink:var(--hull-700);

  --accent:var(--signal-orange);
  --accent-fg:#FFFFFF;
  --accent-hover:var(--signal-orange-lo);
  --focus-ring:var(--signal-orange);

  /* ---- Type ---- */
  --font-word:'DM Sans', system-ui, sans-serif;        /* wordmark only */
  --font-display:'Inter Tight', system-ui, sans-serif;
  --font-sans:'Inter Tight', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --t-display-xl:76px; --t-display-lg:56px; --t-display-md:40px; --t-display-sm:32px;
  --t-h1:28px; --t-h2:22px; --t-h3:18px; --t-h4:16px;
  --t-body-lg:18px; --t-body:15px; --t-body-sm:13px; --t-caption:12px; --t-micro:11px;
  --t-mono-lg:14px; --t-mono:13px; --t-mono-sm:11px;

  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-loose:1.62;
  --tr-tight:-0.02em; --tr-normal:0; --tr-wide:0.04em; --tr-widest:0.14em;

  /* ---- Spacing (4px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  /* ---- Radius (sharp) ---- */
  --r-1:2px; --r-2:4px; --r-3:6px; --r-pill:999px;

  /* ---- Elevation ---- */
  --e-1:0 1px 2px rgba(20,33,46,0.06);
  --e-2:0 6px 20px -6px rgba(20,33,46,0.14), 0 0 0 1px var(--border);
  --e-3:0 24px 48px -12px rgba(20,33,46,0.20), 0 0 0 1px var(--border-strong);
  --e-glow:0 0 0 1px var(--signal-orange), 0 0 24px -4px rgba(255,106,31,0.45);

  /* ---- Motion ---- */
  --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);

  --maxw:1200px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-size:var(--t-body); line-height:var(--lh-normal);
  font-feature-settings:'cv11' 1;
}
::selection{background:var(--signal-orange); color:#fff;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}

/* ---------- Type utilities ---------- */
.t-display-xl{font:800 var(--t-display-xl)/var(--lh-tight) var(--font-display);letter-spacing:var(--tr-tight);}
.t-display-lg{font:700 var(--t-display-lg)/var(--lh-tight) var(--font-display);letter-spacing:var(--tr-tight);}
.t-display-md{font:700 var(--t-display-md)/var(--lh-snug) var(--font-display);letter-spacing:var(--tr-tight);}
.t-display-sm{font:600 var(--t-display-sm)/var(--lh-snug) var(--font-display);letter-spacing:var(--tr-tight);}
.t-h1{font:700 var(--t-h1)/var(--lh-snug) var(--font-display);letter-spacing:var(--tr-tight);}
.t-h2{font:600 var(--t-h2)/var(--lh-snug) var(--font-display);letter-spacing:var(--tr-tight);}
.t-h3{font:600 var(--t-h3)/var(--lh-snug) var(--font-display);}
.t-h4{font:600 var(--t-h4)/var(--lh-snug) var(--font-display);}
.t-body-lg{font:400 var(--t-body-lg)/var(--lh-loose) var(--font-sans);}
.t-body{font:400 var(--t-body)/var(--lh-normal) var(--font-sans);}
.t-body-sm{font:400 var(--t-body-sm)/var(--lh-normal) var(--font-sans);}
.t-mono{font:500 var(--t-mono)/var(--lh-normal) var(--font-mono);}
.t-mono-lg{font:500 var(--t-mono-lg)/var(--lh-normal) var(--font-mono);}
.t-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'zero' 1;}

/* The signature uppercase mono label */
.t-label{
  font:600 var(--t-mono-sm)/1 var(--font-mono);
  letter-spacing:var(--tr-widest); text-transform:uppercase; color:var(--fg-subtle);
}
.t-label.accent{color:var(--accent);}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-6);}
.section{padding:var(--s-24) 0;}
@media(max-width:760px){.section{padding:var(--s-16) 0;}}

/* ---------- Wordmark lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:11px;}
.lockup svg{flex:none;}
.lockup .word{font:600 21px/1 var(--font-word);letter-spacing:-0.02em;color:var(--ink-900);white-space:nowrap;}
.lockup .word b{font-weight:600;}
.lockup .word span{font-weight:400;}
.lockup.on-ink .word{color:var(--hull-000);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 var(--t-body)/1 var(--font-sans);
  padding:13px 20px;border-radius:var(--r-2);border:1px solid transparent;
  cursor:pointer;transition:background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:var(--accent-fg);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--bg-surface);}
.btn-ink{background:var(--ink-900);color:#fff;}
.btn-ink:hover{background:#000;}
.btn-on-ink{background:transparent;color:var(--hull-050);border-color:var(--hull-600);}
.btn-on-ink:hover{background:var(--hull-800);}
.btn-sm{padding:9px 14px;font-size:var(--t-body-sm);}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font:600 var(--t-mono-sm)/1 var(--font-mono);letter-spacing:var(--tr-wide);
  text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);color:var(--fg-muted);background:var(--bg-raised);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--status-ok);flex:none;}
.pill.ok .dot{background:var(--status-ok);}
.pill.accent{border-color:transparent;background:var(--signal-orange-bg);color:var(--signal-orange-lo);}
.pill.accent .dot{background:var(--signal-orange);}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ---------- Hairline divider ---------- */
.rule{height:1px;background:var(--border);border:0;margin:0;}

/* ---------- Eyebrow with tick ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}