/* ============================================================================
   wwwblueprintco.com — Design Tokens
   v1.0 LOCKED — see BRIEF.md for rationale
   Tinted-monochrome palette: warm off-white + navy + sage + gold accent.
   Adopts ssscript.app's discipline; adapted to BluePrint CO. brand identity.
   ============================================================================ */

:root {
  /* ─── COLOR ──────────────────────────────────────────────────────────── */
  /* v3 palette — DARK MONOCHROME (LOCKED 2026-05-25):
     Pure black + white. No colored accent. Hierarchy is created by
     opacity and surface elevation, not hue. This is the "everything
     overlaid in 3D" identity. */

  /* Surface elevation tiers (deeper = further back) */
  --c-bg:              #08090B;  /* base page bg — deep, not pure black (better for floating contrast) */
  --c-bg-surface-1:    #0F1014;  /* sections that lift slightly */
  --c-bg-surface-2:    #16171C;  /* cards, portfolio viewer chrome */
  --c-bg-surface-3:    #1E1F26;  /* top-floated elements (modals, hover cards) */
  --c-bg-card:         var(--c-bg-surface-2);   /* alias */
  --c-bg-overlay:      rgba(8, 9, 11, 0.72);    /* nav blur backdrop */

  /* Text — pure white at opacity tiers */
  --c-ink:             #FFFFFF;
  --c-ink-soft:        rgba(255, 255, 255, 0.78);   /* body */
  --c-ink-mute:        rgba(255, 255, 255, 0.54);   /* eyebrows, secondary */
  --c-ink-faint:       rgba(255, 255, 255, 0.32);   /* footer fine print */
  --c-ink-darker-70:   rgba(255, 255, 255, 0.50);   /* emphasis dim spans */

  /* Borders — white at very low opacity, define layer edges */
  --c-border:          rgba(255, 255, 255, 0.08);
  --c-border-bright:   rgba(255, 255, 255, 0.16);
  --c-border-soft:     rgba(255, 255, 255, 0.04);

  /* Accent = pure white. No color. Opacity does the work. */
  --c-accent:          #FFFFFF;
  --c-accent-light:    rgba(255, 255, 255, 0.85);
  --c-accent-soft:     rgba(255, 255, 255, 0.08);

  /* Status (used once each, kept very desaturated for monochrome discipline) */
  --c-success:         #6DD498;
  --c-warn:            #E89C70;

  /* Shader colors — atmospheric darks + faint white wisps */
  --c-shader-a:        #08090B;   /* base */
  --c-shader-b:        #1E1F26;   /* mid */
  --c-shader-c:        #FFFFFF;   /* highlight (used at 4-8% in shader mix) */

  /* ─── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-display:   'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:      var(--font-display);  /* single family, weight contrast only */
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — clamp(min, fluid, max) */
  --fs-hero:        clamp(2.75rem, 7vw, 7rem);      /* h1 — display */
  --fs-h2:          clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3:          clamp(1.125rem, 1.8vw, 1.5rem);
  --fs-body:        clamp(0.95rem, 0.55vw + 0.85rem, 1.05rem);
  --fs-small:       0.875rem;
  --fs-mono:        0.8rem;
  --fs-eyebrow:     0.75rem;  /* uppercase tracking labels */

  /* Weights — Instrument Sans Variable supports 400-700 */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* Line heights */
  --lh-tight:       1.04;   /* display headings */
  --lh-snug:        1.2;    /* section headings */
  --lh-normal:      1.5;    /* body */
  --lh-relaxed:     1.7;    /* long-form paragraphs */

  /* Letter-spacing */
  --ls-tight:       -0.02em;   /* display */
  --ls-snug:        -0.01em;   /* h2 */
  --ls-normal:      0;
  --ls-wide:        0.04em;    /* eyebrow / mono */
  --ls-widest:      0.18em;    /* the CO. wordmark accent */

  /* ─── SPACING ────────────────────────────────────────────────────────── */
  --sp-3xs:         0.25rem;   /* 4px  */
  --sp-2xs:         0.5rem;    /* 8px  */
  --sp-xs:          0.75rem;   /* 12px */
  --sp-sm:          1rem;      /* 16px */
  --sp-md:          1.5rem;    /* 24px */
  --sp-lg:          2.5rem;    /* 40px */
  --sp-xl:          4rem;      /* 64px */
  --sp-2xl:         6rem;      /* 96px */
  --sp-3xl:         10rem;     /* 160px — between major sections */

  /* Container */
  --container-max:  1440px;
  --container-pad:  clamp(1.5rem, 4vw, 4rem);

  /* ─── LAYOUT ─────────────────────────────────────────────────────────── */
  --radius-sm:      4px;
  --radius-md:      10px;       /* cards */
  --radius-lg:      14px;       /* the portfolio viewer chrome */
  --radius-pill:    999px;

  --nav-h:          72px;
  --nav-h-shrink:   56px;       /* on scroll */

  /* z-index scale */
  --z-shader:       0;
  --z-content:      10;
  --z-portfolio:    20;         /* the draggable viewer floats above content */
  --z-cursor:       50;
  --z-nav:          80;
  --z-modal:        100;

  /* ─── MOTION ─────────────────────────────────────────────────────────── */
  --dur-instant:    0.12s;
  --dur-fast:       0.2s;
  --dur-base:       0.32s;
  --dur-slow:       0.6s;
  --dur-glacial:    1.2s;

  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);          /* GSAP power3.out equiv */
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);          /* power2.inOut */
  --ease-expo:      cubic-bezier(0.16, 1, 0.3, 1);           /* expo.out — dramatic */

  /* ─── EFFECTS ────────────────────────────────────────────────────────── */
  /* Shadows — for dark mode, shadows alone don't lift; we combine
     a soft drop shadow + a top-edge highlight inset to create the
     "3D floating" feel. */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.45),
                    0 2px 6px  rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-lg:      0 32px 80px rgba(0, 0, 0, 0.55),
                    0 8px 24px  rgba(0, 0, 0, 0.40),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);   /* portfolio viewer chrome */
  --shadow-focus:   0 0 0 3px rgba(255, 255, 255, 0.30);       /* white focus ring */

  --blur-nav:       saturate(180%) blur(16px);

  /* ─── BORDERS ────────────────────────────────────────────────────────── */
  --bw-hair:        1px;
}

/* ─── DARK MODE (future-proofing — not shipped v1) ────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Intentionally left as a comment block — flagship ships light-only v1.
     Dark mode tokens would invert ink/bg, keep accent, soften borders.
     Add after v1 live. */
}

/* ─── BASE RESET (minimal, mostly browser-native trust) ───────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  font-size: var(--fs-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}

h1 { font-size: var(--fs-hero);    letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2);      letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3);      line-height: var(--lh-snug); }

p { margin: 0; line-height: var(--lh-relaxed); color: var(--c-ink-mute); }

a {
  color: var(--c-ink);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-accent); }

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

img, video, canvas { display: block; max-width: 100%; height: auto; }

::selection { background: rgba(255, 255, 255, 0.18); color: var(--c-ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Screen-reader-only utility (visually hidden, still announced to AT) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link (accessibility — visible on focus only) */
.skip-to-content {
  position: absolute; left: -10000px; top: 0;
  background: var(--c-ink); color: var(--c-bg);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--fw-semibold);
  z-index: var(--z-modal);
}
.skip-to-content:focus { left: 0; }

/* ─── EMPHASIS SPAN (the "darker-70" pattern from ssscript) ───────────── */
.dim-70 { color: var(--c-ink-darker-70); }

/* ─── ACCENT — used sparingly per BRIEF ───────────────────────────────── */
.accent-text     { color: var(--c-accent); }
.accent-underline {
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-position: 0 100%; background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* ─── EYEBROW LABEL ───────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
}

/* ─── CONTAINER ───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── SECTION RHYTHM ──────────────────────────────────────────────────── */
section, header[id], footer[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-md)); }
section { padding-block: var(--sp-3xl); }
@media (max-width: 768px) {
  section { padding-block: var(--sp-2xl); }
}