/* ============================================================
   REI Blueprint Coaching — Design Tokens
   Colors + Type. Import this first in any artifact.
   ============================================================ */

/* Website typography is overridden by site.css using Segoe UI and system fonts. */

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Blueprint Navy — the brand's primary "paper" surface.
     Mirrors the deep navy in the logo lockup. */
  --blueprint-navy:        #0E2A47;
  --blueprint-navy-deep:   #061B33;   /* near-black variant; used for headers/footers */
  --blueprint-navy-soft:   #1B3D63;   /* slightly lifted, for cards on navy */

  /* Blueprint Line — the cyan-blue drafting line. Primary on-navy accent. */
  --blueprint-line:        #6FB1FC;
  --blueprint-line-bright: #9FC9FF;
  --blueprint-line-soft:   rgba(111, 177, 252, 0.22);

  /* Drafting Cream — warm paper. The complementary "real-world" surface. */
  --paper-cream:           #F4EFE3;
  --paper-cream-deep:      #E8DFC9;
  --paper-warm-line:       #C9B98E;   /* faint sepia rule on cream */

  /* Ink — body text on light surfaces */
  --ink:                   #11161F;
  --ink-2:                 #2A3340;
  --ink-3:                 #5B6676;
  --ink-4:                 #8A95A5;

  /* Marker Orange — the "coach's pen". Single hot accent. Use sparingly. */
  --marker:                #E8743C;
  --marker-deep:           #C75A24;
  --marker-soft:           #F7D6BE;

  /* Semantic */
  --success:               #2E8C5A;   /* deal closed, completed */
  --warning:               #D6A02C;
  --danger:                #C24A3E;
  --info:                  var(--blueprint-line);

  /* ---------- SEMANTIC SURFACES ---------- */
  /* "Blueprint" surfaces — dark navy with cyan ink, for hero/section moments */
  --bg-blueprint:          var(--blueprint-navy);
  --bg-blueprint-deep:     var(--blueprint-navy-deep);
  --on-blueprint:          #EAF2FF;          /* primary text on navy */
  --on-blueprint-muted:    rgba(234, 242, 255, 0.62);
  --on-blueprint-line:     var(--blueprint-line);

  /* "Paper" surfaces — cream/white for body content and reading */
  --bg-paper:              var(--paper-cream);
  --bg-paper-elev:         #FBF8F0;          /* lifted card on paper */
  --bg-white:              #FFFFFF;
  --on-paper:              var(--ink);
  --on-paper-muted:        var(--ink-3);

  /* Borders & rules */
  --rule-line:             rgba(11, 30, 60, 0.12);
  --rule-line-strong:      rgba(11, 30, 60, 0.28);
  --rule-blueprint:        rgba(111, 177, 252, 0.28);
  --rule-blueprint-strong: rgba(111, 177, 252, 0.55);

  /* ---------- FOREGROUND ALIASES ---------- */
  --fg-1:                  var(--ink);        /* primary */
  --fg-2:                  var(--ink-2);      /* secondary */
  --fg-3:                  var(--ink-3);      /* muted */
  --fg-4:                  var(--ink-4);      /* very muted / hints */
  --fg-invert:             #FFFFFF;

  /* ---------- TYPOGRAPHY ----------
     --font-display: CAD/drafting lettering — monospaced, uniform single-stroke,
                     all-caps native. The Google Fonts match for ISO 3098 /
                     ISOCPEUR / RomanS drafting fonts. Hero moments only.
     --font-body:    workhorse for UI headings (H1-H4) and body copy.
     --font-mono:    technical spec labels ("STEP 02 / 06", "EST. ARV"). */
  --font-display:  'Share Tech Mono', 'Andale Mono', 'Courier New', monospace;
  --font-body:     'Inter', 'Arial', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale — pixel values, semantic */
  --fs-display-xl:  88px;   --lh-display-xl: 0.96;
  --fs-display-lg:  64px;   --lh-display-lg: 1.00;
  --fs-display-md:  48px;   --lh-display-md: 1.04;
  --fs-h1:          40px;   --lh-h1: 1.08;
  --fs-h2:          30px;   --lh-h2: 1.16;
  --fs-h3:          22px;   --lh-h3: 1.24;
  --fs-h4:          18px;   --lh-h4: 1.32;
  --fs-body-lg:     18px;   --lh-body-lg: 1.55;
  --fs-body:        16px;   --lh-body: 1.55;
  --fs-body-sm:     14px;   --lh-body-sm: 1.50;
  --fs-caption:     12px;   --lh-caption: 1.40;
  --fs-overline:    11px;   --lh-overline: 1.20;   /* mono, tracked */

  /* Tracking */
  --track-display:   -0.02em;
  --track-tight:     -0.01em;
  --track-normal:    0em;
  --track-loose:     0.04em;
  --track-overline:  0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  /* Architectural — corners stay crisp. Cards are slightly soft, pills are round. */
  --r-none: 0;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Shadows are subtle. Most depth comes from borders + crisp rules. */
  --shadow-sm:  0 1px 2px rgba(11, 30, 60, 0.06), 0 0 0 1px var(--rule-line);
  --shadow-md:  0 4px 12px rgba(11, 30, 60, 0.08), 0 0 0 1px var(--rule-line);
  --shadow-lg:  0 12px 32px rgba(11, 30, 60, 0.14), 0 0 0 1px var(--rule-line);
  --shadow-blueprint-glow: 0 0 0 1px var(--rule-blueprint-strong), 0 8px 24px rgba(111, 177, 252, 0.18);

  /* ---------- GRID / PATTERNS ---------- */
  /* Blueprint grid — major lines every 80px, minor every 16px. */
  --grid-minor: 16px;
  --grid-major: 80px;
  --grid-line-color: rgba(111, 177, 252, 0.10);
  --grid-line-color-major: rgba(111, 177, 252, 0.18);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these in markup instead of one-off font/size combos.
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); -webkit-font-smoothing: antialiased; }

/* Display = Share Tech Mono — single weight 400, monospaced, all-caps native.
   Clean CAD-plotter feel. Tight tracking, tight line-height. */
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-xl);
  line-height: 1.0;
  letter-spacing: 0;
  text-transform: uppercase;
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-lg);
  line-height: 1.0;
  letter-spacing: 0;
  text-transform: uppercase;
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-md);
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* UI headings stay on Inter — mono-display at small sizes feels too sparse.
   Add .t-display-cad to opt INTO Share Tech Mono at any size. */
h1, .t-h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-tight);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-tight);
  margin: 0;
}
.t-display-cad {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.04;
}
h3, .t-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  margin: 0;
}
p, .t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  text-wrap: pretty;
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}
.t-spec {
  /* Architectural callout — like a label on a drafting plan */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blueprint-line);
}

/* ============================================================
   UTILITY BACKGROUNDS — blueprint surface helpers
   ============================================================ */

/* Subtle blueprint grid backdrop on navy. Use on hero/section dividers. */
.bg-blueprint-grid {
  background-color: var(--bg-blueprint);
  background-image:
    linear-gradient(var(--grid-line-color-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size:
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major),
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor);
  color: var(--on-blueprint);
}

/* Paper backdrop with faint sepia rule, for body content */
.bg-paper-rule {
  background-color: var(--bg-paper);
  background-image: linear-gradient(var(--paper-warm-line) 1px, transparent 1px);
  background-size: 100% 32px;
  color: var(--on-paper);
}

/* Soft paper, no rule */
.bg-paper { background: var(--bg-paper); color: var(--on-paper); }
.bg-paper-elev { background: var(--bg-paper-elev); color: var(--on-paper); }
.bg-white { background: var(--bg-white); color: var(--on-paper); }
.bg-blueprint { background: var(--bg-blueprint); color: var(--on-blueprint); }
.bg-blueprint-deep { background: var(--bg-blueprint-deep); color: var(--on-blueprint); }