/* ============================================================
   UX BUREAU — Design System Foundations
   colors_and_type.css
   ============================================================ */

/* ── Brand Fonts (self-hosted WOFF2, latin subset, /fonts/ at web root) ───────── */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/intertight.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrainsmono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('fonts/bigshoulders.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Color Tokens ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:                #0A0A0A;
  --surface:           #141414;
  --surface-hover:     #1A1A1A;

  /* Text */
  --fg-primary:        #F5F5F5;
  --fg-secondary:      #A3A3A3;
  --fg-muted:          #8A8A8A; /* AA contrast on #0A0A0A */

  /* Borders */
  --border-subtle:     #1F1F1F;
  --border-default:    #2A2A2A;

  /* Accent */
  --accent:            #B4FF39;
  --accent-fg:         #0A0A0A;   /* text on accent bg */

  /* ── Semantic aliases ──────────────────────────────────── */
  --color-bg:          var(--bg);
  --color-card:        var(--surface);
  --color-card-hover:  var(--surface-hover);
  --color-heading:     var(--fg-primary);
  --color-body:        var(--fg-secondary);
  --color-meta:        var(--fg-muted);
  --color-border:      var(--border-default);
  --color-divider:     var(--border-subtle);
  --color-cta:         var(--accent);
}

/* ── Typography Tokens ────────────────────────────────────── */
:root {
  /* Font families */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Inter Tight', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Sizes */
  --text-hero:        clamp(72px, 10vw, 180px);
  --text-section:     clamp(72px, 9vw, 160px);
  --text-case:        clamp(64px, 7vw, 120px);
  --text-key-statement: clamp(40px, 5vw, 80px);
  --text-subsection:  32px;
  --text-body-lg:     20px;
  --text-body:        16px;
  --text-meta:        13px;

  /* Line heights */
  --lh-hero:      0.95; /* @kind font */
  --lh-section:   0.98; /* @kind font */
  --lh-sub:       1.1; /* @kind font */
  --lh-body-lg:   1.5; /* @kind font */
  --lh-body:      1.6; /* @kind font */
  --lh-meta:      1.4; /* @kind font */

  /* Letter spacing */
  --ls-hero:      -0.03em; /* @kind font */
  --ls-section:   -0.025em; /* @kind font */
  --ls-meta:       0.02em; /* @kind font */

  /* Weights */
  --fw-display:   400; /* @kind font */
  --fw-body:      400; /* @kind font */
  --fw-body-med:  500; /* @kind font */
  --fw-mono:      400; /* @kind font */
}

/* ── Semantic Type Classes ────────────────────────────────── */

/* Hero display — Fraunces, massive */
.t-hero {
  font-family:    var(--font-display);
  font-size:      var(--text-hero);
  font-weight:    var(--fw-display);
  line-height:    var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color:          var(--fg-primary);
  font-variation-settings: 'opsz' 144;
}

/* Section title */
.t-section {
  font-family:    var(--font-display);
  font-size:      var(--text-section);
  font-weight:    var(--fw-display);
  line-height:    var(--lh-section);
  letter-spacing: var(--ls-section);
  color:          var(--fg-primary);
  font-variation-settings: 'opsz' 144;
}

/* Subsection title */
.t-sub {
  font-family:    var(--font-display);
  font-size:      var(--text-subsection);
  font-weight:    var(--fw-display);
  line-height:    var(--lh-sub);
  color:          var(--fg-primary);
  font-variation-settings: 'opsz' 72;
}

/* Body large */
.t-body-lg {
  font-family:  var(--font-body);
  font-size:    var(--text-body-lg);
  font-weight:  var(--fw-body);
  line-height:  var(--lh-body-lg);
  color:        var(--fg-secondary);
}

/* Body */
.t-body {
  font-family:  var(--font-body);
  font-size:    var(--text-body);
  font-weight:  var(--fw-body);
  line-height:  var(--lh-body);
  color:        var(--fg-secondary);
}

/* Meta / mono label */
.t-meta {
  font-family:    var(--font-mono);
  font-size:      var(--text-meta);
  font-weight:    var(--fw-mono);
  line-height:    var(--lh-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color:          var(--fg-muted);
}

/* ── Layout Tokens ────────────────────────────────────────── */
:root {
  --max-width:      1440px;
  --side-pad:       clamp(24px, 5vw, 80px);
  --section-pad:    clamp(64px, 8vw, 140px);
  --row-gap:        clamp(40px, 6vw, 80px);

  --radius-sm:      4px;
  --radius-md:      8px;
  /* No larger radii in the system */
}

/* ── Transition ───────────────────────────────────────────── */
:root {
  --ease:    cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur:     200ms; /* @kind other */
  --trans:   var(--dur) var(--ease);
}

/* ── Base Element Styles ──────────────────────────────────── */
html {
  background-color: var(--bg);
  color:            var(--fg-primary);
  font-family:      var(--font-body);
  font-size:        var(--text-body);
  line-height:      var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering:   optimizeLegibility;
}

/* ── Semantic HTML element bindings ──────────────────────── */
h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: var(--fw-display); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); color: var(--fg-primary); font-variation-settings: 'opsz' 144; }
h2 { font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--fw-display); line-height: var(--lh-section); letter-spacing: var(--ls-section); color: var(--fg-primary); font-variation-settings: 'opsz' 144; }
h3 { font-family: var(--font-display); font-size: var(--text-subsection); font-weight: var(--fw-display); line-height: var(--lh-sub); color: var(--fg-primary); }
p  { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); color: var(--fg-secondary); }
code, pre { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: var(--ls-meta); color: var(--fg-secondary); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans);
}
a:hover { color: var(--accent); }

/* ── Utility: Accent Highlight ─────────────────────────────── */
.accent          { color: var(--accent); }
.accent-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* ── Utility: Animated underline link ────────────────────── */
.link-animated {
  position: relative;
  display: inline-block;
}
.link-animated::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.link-animated:hover::after { transform: scaleX(1); }
.link-animated:hover { color: var(--accent); }

/* ── Utility: CTA Button ──────────────────────────────────── */
.btn {
  display:          inline-flex;
  align-items:      center;
  gap:              8px;
  padding:          12px 24px;
  font-family:      var(--font-body);
  font-size:        var(--text-body);
  font-weight:      var(--fw-body-med);
  color:            var(--fg-primary);
  background:       transparent;
  border:           1px solid var(--border-default);
  border-radius:    0;
  cursor:           pointer;
  transition:       background var(--trans), color var(--trans), border-color var(--trans);
  text-transform:   none;
  letter-spacing:   0;
  white-space:      nowrap;
}
.btn:hover {
  background:   var(--accent);
  color:        var(--accent-fg);
  border-color: var(--accent);
}

/* ── Utility: Card ────────────────────────────────────────── */
.card {
  background:     var(--surface);
  border:         1px solid var(--border-default);
  padding:        32px;
  transition:     border-color var(--trans), background var(--trans);
}
.card:hover {
  border-color:   var(--accent);
  background:     var(--surface-hover);
}

/* ── Utility: Form Input ──────────────────────────────────── */
.input {
  display:        block;
  width:          100%;
  background:     transparent;
  border:         none;
  border-bottom:  1px solid var(--border-default);
  padding:        12px 0;
  font-family:    var(--font-body);
  font-size:      var(--text-body);
  color:          var(--fg-primary);
  outline:        none;
  transition:     border-color var(--trans);
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { border-bottom-color: var(--accent); }

/* ── Utility: Section divider ─────────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  border: none;
}

/* ── Utility: Section header (mono number + serif title) ──── */
.section-header .section-number {
  font-family:    var(--font-mono);
  font-size:      var(--text-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color:          var(--accent);
  margin-bottom:  24px;
}
.section-header .section-title {
  font-family:    var(--font-display);
  font-size:      var(--text-section);
  font-weight:    var(--fw-display);
  line-height:    var(--lh-section);
  letter-spacing: var(--ls-section);
  color:          var(--fg-primary);
  font-variation-settings: 'opsz' 144;
}

/* ── Utility: Tag / Chip ─────────────────────────────────── */
.tag {
  display:        inline-block;
  font-family:    var(--font-mono);
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color:          var(--fg-muted);
  border:         1px solid var(--border-default);
  padding:        3px 8px;
  border-radius:  var(--radius-sm);
}

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  height:           64px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 var(--side-pad);
  background:       rgba(10, 10, 10, 0.7);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:    1px solid var(--border-subtle);
}
.nav-logo {
  font-family:    var(--font-mono);
  font-size:      13px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color:          var(--fg-primary);
}
.nav-links {
  display:  flex;
  gap:      32px;
  list-style: none;
}
.nav-links a {
  font-family:    var(--font-mono);
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color:          var(--fg-muted);
  transition:     color var(--trans);
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

/* ── Background layers ────────────────────────────────────── */
/* Layer 2 — 1px grid overlay, fixed, behind all content */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, #1F1F1F 1px, transparent 1px),
    linear-gradient(to bottom, #1F1F1F 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.12;
}

@media (max-width: 768px) {
  .bg-grid {
    background-size: 160px 160px;
    opacity: 0.10;
  }
}

/* Layer 3 — Film grain, static, fixed */
.bg-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Layer 4 — Hero-only radial gradient — on ::before so bg-grid/bg-grain remain visible */
.hero-gradient {
  position: relative;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 5% 5%,
    rgba(20, 20, 20, 0.6) 0%,
    transparent 60%
  );
  animation: heroGradientDrift 28s ease-in-out infinite;
}
.hero-gradient > * { position: relative; z-index: 1; }

@keyframes heroGradientDrift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(8px, -6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gradient::before { animation: none; transform: none; }
}

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════════════
   UX BUREAU WORDMARK — COMPONENT CSS
   Append this to colors_and_type.css in the Design System.
   
   Dependencies:
   — Fraunces (already loaded as --font-display)
   — Big Shoulders Display — add new @font-face / Google Fonts import
   — Accent color --accent: #B4FF39 (already defined)
   — Foreground color --fg-primary or --fg (already defined)
   ════════════════════════════════════════════════════════════════════ */


/* ── Font dependency — add to the Google Fonts import line ──
   Big Shoulders Display 500 is the ONLY weight we need for the mark.
   
   Update your existing @import to include:
   @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500&display=swap');
   
   Or append Big+Shoulders+Display:wght@500 to the existing multi-family import.
   ──────────────────────────────────────────────────────────── */


/* ── The wordmark ────────────────────────────────────────────────── */
.wordmark {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
  color: var(--fg-primary, #F0EDE8);
}

.wordmark__ux {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
  font-variation-settings: 'opsz' 144;
}

.wordmark__bureau {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

/* Vertical rule with ticks — the single accent element in the mark */
.wordmark__rule {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

.wordmark__rule .bar {
  display: block;
  background: var(--accent, #B4FF39);
}

.wordmark__rule .tick {
  position: absolute;
  background: var(--accent, #B4FF39);
  left: 50%;
  transform: translateX(-50%);
}

.wordmark__rule .tick.top { top: 0; }
.wordmark__rule .tick.bot { bottom: 0; }


/* ── Size modifiers ──────────────────────────────────────────────── */

/* HERO — 160px scale, landing/splash contexts */
.wordmark--hero .wordmark__ux     { font-size: 138px; }
.wordmark--hero .wordmark__bureau { font-size: 66px; }
.wordmark--hero .wordmark__rule   { margin: 0 18px 0 38px; }
.wordmark--hero .wordmark__rule .bar  { width: 3px; height: 100px; }
.wordmark--hero .wordmark__rule .tick { width: 13px; height: 3px; }

/* MEDIUM — 64px scale, section signatures */
.wordmark--mid .wordmark__ux     { font-size: 56px; }
.wordmark--mid .wordmark__bureau { font-size: 27px; }
.wordmark--mid .wordmark__rule   { margin: 0 10px 0 22px; }
.wordmark--mid .wordmark__rule .bar  { width: 2.5px; height: 41px; }
.wordmark--mid .wordmark__rule .tick { width: 9px; height: 2.5px; }

/* NAV — 24px scale, MINIMUM allowed size */
.wordmark--nav .wordmark__ux     { font-size: 23px; }
.wordmark--nav .wordmark__bureau { font-size: 11px; }
.wordmark--nav .wordmark__rule   { margin: 0 5px 0 11px; }
.wordmark--nav .wordmark__rule .bar  { width: 2px; height: 17px; }
.wordmark--nav .wordmark__rule .tick { width: 6px; height: 2px; }


/* ── Monochrome fallback ─────────────────────────────────────────── */
/* Apply when accent is unavailable — print, limited-palette contexts.
   Rule and ticks render in foreground colour. Mark holds. */
.wordmark--mono .wordmark__rule .bar,
.wordmark--mono .wordmark__rule .tick {
  background: var(--fg-primary, #F0EDE8);
}


/* ══════════════════════════════════════════════════════════════════
   USAGE NOTES (for design system documentation, not CSS)
   
   Minimum size:        24px cap-height (nav variant)
   Clearspace:          cap-height of UX on all four sides
   Monochrome:          apply .wordmark--mono modifier
   Never:               scale below 24px, rotate, recolour letterforms,
                        replace rule with alternative ornament
   Rule characteristic: 3px bar with tick caps at both ends in accent
   
   HTML structure (always same, regardless of size variant):
   
   <div class="wordmark wordmark--[hero|mid|nav]">
     <span class="wordmark__ux">UX</span>
     <div class="wordmark__rule">
       <span class="tick top"></span>
       <span class="bar"></span>
       <span class="tick bot"></span>
     </div>
     <span class="wordmark__bureau">Bureau</span>
   </div>
   ══════════════════════════════════════════════════════════════════ */