/* atlas-tokens.css ──────────────────────────────────────────────
   Diversified Consulting Inc. - Atlas brand system tokens.
   Single source of truth for color, type, spacing, motion.
   Every Atlas surface should @import this and only reference vars.
   ──────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ─────────── Color ─────────── */
  --ink:        #0A1F3D;       /* anchor - headings, primary surfaces */
  --slate:      #1F3A5F;       /* secondary navy - dark UI fills */
  --steel:      #5C7290;       /* muted blue-gray - body secondary */
  --mist:       #BFCBD8;       /* soft chrome - dividers, on-dark text */
  --bone:       #F1ECE0;       /* warm off-white - alternate surface */
  --paper:      #FAF8F2;       /* page background */
  --brass:      #8E7A3E;       /* accent - rules, underlines, hover */
  --brass-soft: #C8B785;       /* hover-tint of brass */
  --hair:       #E3DCCB;       /* hairline rule on paper */
  --hair-strong:#D3C9AE;       /* slightly stronger hairline */
  --on-dark:    #E8E2D2;       /* primary text on ink */
  --on-dark-2:  #B6BFCC;       /* secondary text on ink */

  /* Semantic - muted, never bright */
  --success:    #3F6B45;
  --warning:    #9C7A29;
  --danger:     #8C3A2E;

  /* ─────────── Type families ─────────── */
  --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ─────────── Weights ─────────── */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ─────────── Type scale (web) ─────────── */
  --t-display:    72px;
  --t-h1:         44px;
  --t-h2:         32px;
  --t-h3:         22px;
  --t-h4:         17px;
  --t-body:       17px;
  --t-body-sm:    15px;
  --t-caption:    13px;
  --t-eyebrow:    11px;
  --t-mono-sm:    12px;
  --t-mono:       14px;

  /* ─────────── Tracking ─────────── */
  --tr-display:   -0.025em;
  --tr-heading:   -0.015em;
  --tr-body:      0;
  --tr-eyebrow:   0.22em;
  --tr-caps:      0.06em;

  /* ─────────── Line heights ─────────── */
  --lh-tight:   1.06;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* ─────────── Spacing scale (8pt grid + 4pt half) ─────────── */
  --s-0:  4px;
  --s-1:  8px;
  --s-2:  12px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  44px;
  --s-7:  64px;
  --s-8:  88px;
  --s-9:  120px;
  --s-10: 160px;

  /* ─────────── Layout ─────────── */
  --container-max:      1240px;
  --container-narrow:   880px;
  --container-readable: 680px;
  --gutter:             32px;
  --header-h:           72px;

  /* ─────────── Radii ─────────── */
  --r-0:    0px;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-4:    10px;
  --r-pill: 999px;

  /* ─────────── Shadow ─────────── */
  --shadow-0: 0 0 0 1px rgba(10,31,61,0.06);
  --shadow-1: 0 1px 2px rgba(10,31,61,0.05), 0 0 0 1px rgba(10,31,61,0.04);
  --shadow-2: 0 4px 16px rgba(10,31,61,0.08), 0 0 0 1px rgba(10,31,61,0.05);
  --shadow-3: 0 16px 48px rgba(10,31,61,0.12);

  /* ─────────── Motion ─────────── */
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────── Reset / base ─────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ─────────── Utility classes ─────────── */
.t-eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--steel);
}
.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-medium);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.t-h1 {
  font-size: var(--t-h1);
  letter-spacing: var(--tr-heading);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}
.t-h2 {
  font-size: var(--t-h2);
  letter-spacing: var(--tr-heading);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
}
.t-h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
  line-height: var(--lh-snug);
}
.t-h4 {
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  line-height: var(--lh-normal);
}
.t-lead { font-size: 21px; line-height: 1.5; color: var(--slate); font-weight: var(--w-regular); }
.t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); }
.t-caption { font-size: var(--t-caption); color: var(--steel); }

.hair { border: 0; border-top: 1px solid var(--hair); height: 0; }
.hair-strong { border: 0; border-top: 1px solid var(--hair-strong); height: 0; }

.container       { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-read  { max-width: var(--container-readable); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: var(--t-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.01em;
  border-radius: var(--r-2);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--slate); border-color: var(--slate); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--brass);
  color: var(--brass);
}
.btn--small { padding: 9px 16px; font-size: var(--t-caption); }
.btn--link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-weight: var(--w-medium);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -3px;
  height: 1px; background: var(--brass);
  transition: right var(--dur-base) var(--ease-standard);
}
.btn--link:hover { color: var(--brass); }
.btn--link:hover::after { right: 0; }

/* ─────────── Form fields ─────────── */
.field {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--ink); }
.field::placeholder { color: var(--steel); }
textarea.field { resize: vertical; min-height: 120px; line-height: var(--lh-normal); }
.label {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--w-semibold);
  color: var(--steel);
  margin-bottom: 8px;
}

/* ─────────── Focus ring (keyboard) ─────────── */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-2);
}