/* ═══════════════════════════════════════════════════════════════════════════
   DEWFOG — design token layer
   Dark engineering instrument. Cool-slate surfaces · dew aqua accent.
   Display: Bebas Neue · Prose: DM Sans · Data: IBM Plex Mono
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* obfuscated email — text set via CSS, href wired by contact.js */
a.obf-email::before { content: attr(data-u) "\40" attr(data-d); }
a.obf-email { color: inherit; text-decoration: underline; text-decoration-color: var(--dew-dim); }

@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
  /* ── SURFACES (dark, stepping up from deepest) ──────────────────────────── */
  --bg:        #101617;   /* card / component surface                            */
  --bg-subtle: #0a0e0f;   /* page background                                     */
  --bg-sunken: #161d1f;   /* inputs, wells, elevated within cards                */
  --bg-navy:   #1c2427;   /* dark feature panels, result hero                    */
  --bg-navy-2: #161d1f;   /* raised panel on navy                                */

  /* step aliases */
  --bg-1: #101617;
  --bg-2: #161d1f;
  --bg-3: #1c2427;

  /* ── BRAND — one accent: dew ─────────────────────────────────────────────── */
  --dew:        #5cd1c2;
  --dew-dim:    #2d6a63;
  --dew-bright: #78e3d5;

  /* legacy brand aliases */
  --brand:        var(--dew);
  --brand-strong: var(--dew-bright);
  --brand-soft:   rgba(45,106,99,.13);
  --brand-ring:   rgba(92,209,194,.20);
  --sh-brand:     none;

  /* legacy amber aliases → dew */
  --amber:      var(--dew);
  --amber-soft: rgba(92,209,194,.08);

  /* ── SEMANTIC — sparingly ────────────────────────────────────────────────── */
  --green:      #3ecf8e;
  --green-soft: rgba(62,207,142,.10);
  --danger:     #f47c5a;
  --danger-soft:rgba(244,124,90,.10);

  /* legacy aliases */
  --teal:      var(--green);
  --teal-soft: var(--green-soft);
  --red:       var(--danger);
  --red-soft:  var(--danger-soft);
  --violet:    #a78bfa;

  /* ── TEXT ────────────────────────────────────────────────────────────────── */
  --text:    #dce5e5;
  --muted2:  #7c8a8c;
  --muted:   #515b5c;

  /* legacy text aliases */
  --ink:         var(--text);
  --body:        var(--text);
  --muted-2:     var(--muted2);
  --on-navy:     var(--text);
  --on-navy-mut: var(--muted2);

  /* ── BORDERS ─────────────────────────────────────────────────────────────── */
  --border:        #232c2e;
  --border-strong: #2d3a3d;

  /* legacy border aliases */
  --line:   var(--border);
  --line-2: var(--border-strong);

  /* ── TYPE — three strictly role-separated voices ─────────────────────────── */
  --display: "Bebas Neue", system-ui, sans-serif;
  --sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  --fs-hero:  clamp(3rem, 6vw, 5.2rem);
  --fs-h1:    2.4rem;
  --fs-h2:    1.9rem;
  --fs-h3:    0.75rem;
  --fs-lead:  1rem;
  --fs-body:  0.9375rem;
  --fs-sm:    0.8125rem;
  --fs-label: 0.6875rem;
  --fs-mono:  0.875rem;

  /* ── RADII — square by default ───────────────────────────────────────────── */
  --r-sm:   0px;
  --r-md:   0px;
  --r-lg:   0px;
  --r-pill: 999px;
  --radius-0: 0px;

  /* ── ELEVATION — hairlines, not shadows ──────────────────────────────────── */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;

  /* ── SPACE ───────────────────────────────────────────────────────────────── */
  --pad-card: 1.4rem 1.5rem;
  --gap:      1.25rem;
  --maxw:     1000px;

  /* ── MOTION — fast, mechanical, no bounce ────────────────────────────────── */
  --ease: cubic-bezier(0.2,0,0.2,1);
  --dur:  150ms;

  /* ── BLUEPRINT GRID — apply to any full-page dark surface ────────────────── */
  --bp-grid:
    radial-gradient(ellipse 700px 450px at -8% -8%, rgba(92,209,194,.05), transparent 55%),
    radial-gradient(ellipse 600px 400px at 108% 108%, rgba(62,207,142,.04), transparent 55%),
    repeating-linear-gradient(0deg, transparent, transparent 47px, #232c2e 47px, #232c2e 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, #232c2e 47px, #232c2e 48px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--bg-subtle);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: var(--display);
  color: var(--text);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.04em;
}
h3, h4 {
  font-family: var(--mono);
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--dew); text-decoration: none; }
p { text-wrap: pretty; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted2);
}
.eyebrow.muted { color: var(--muted); }
.muted { color: var(--muted2); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1rem; font-weight: 400;
  letter-spacing: .10em;
  padding: .72rem 1.35rem; border-radius: 0; border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform .08s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(0.98); }
.btn-primary   { background: var(--dew); color: var(--bg-subtle); border-color: var(--dew); }
.btn-primary:hover { background: var(--dew-bright); border-color: var(--dew-bright); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--dew); color: var(--dew); }
.btn-ghost     { background: transparent; color: var(--muted2); border: none; }
.btn-ghost:hover { color: var(--text); }
.btn-lg        { padding: .9rem 1.7rem; font-size: 1.15rem; }
.btn-on-navy   { background: var(--dew); color: var(--bg-subtle); border-color: var(--dew); }
.btn-on-navy:hover { background: var(--dew-bright); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 0;
  padding: var(--pad-card); box-shadow: none;
}
.card-soft { background: var(--bg-sunken); border-color: var(--border); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .10em; text-transform: uppercase; color: var(--muted2);
}
.field .hint { font-size: var(--fs-label); color: var(--muted); font-family: var(--mono); letter-spacing: .01em; }
.input, input[type="number"], input[type="text"], select {
  font-family: var(--mono); font-size: var(--fs-mono); color: var(--text);
  background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: 0;
  padding: .62rem .8rem; width: 100%; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.input:focus, input:focus, select:focus {
  border-color: var(--dew);
  border-bottom: 2px solid var(--dew);
  box-shadow: 0 0 0 1px var(--dew-dim);
}
select { cursor: pointer; }
select option { background: var(--bg-sunken); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .10em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 0;
}
.badge-brand { background: rgba(92,209,194,.08); color: var(--dew); border: 1px solid var(--dew-dim); }
.badge-teal  { background: var(--green-soft); color: var(--green); border: 1px solid rgba(62,207,142,.2); }
.badge-line  { background: transparent; border: 1px solid var(--border-strong); color: var(--muted2); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }