/* ============================================================
   brand.css — modern-precise design system
   Shared tokens + fonts for resume, cover letter, and (later) site.
   Aesthetic reference: Vercel / Linear / Tailwind Plus.
   ============================================================ */

/* ---- Fonts (variable woff2, embedded locally) ---- */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Type families. --font-mono is swappable (Geist Mono <-> JetBrains Mono) */
  --font-sans: "Geist", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Neutral scale (cool — zinc) */
  --fg-strong: #09090b;  /* zinc-950 — name, headings */
  --fg:        #18181b;  /* zinc-900 — body */
  --fg-muted:  #52525b;  /* zinc-600 — secondary */
  --fg-subtle: #71717a;  /* zinc-500 — labels, dates */
  --border:    #e4e4e7;  /* zinc-200 — hairlines */
  --border-strong: #d4d4d8; /* zinc-300 */
  --bg:        #ffffff;

  /* Accent — electric blue, used sparingly */
  --accent:    #2563eb;  /* blue-600 */

  /* Header name-frame square border (darker than the scan-trail gray) */
  --frame-border: #c4c7ce;

  /* Site card surfaces (light defaults; dark block overrides) */
  --panel:     #fafafa;  /* zinc-50 — card surface */
  --panel-2:   #f4f4f5;  /* zinc-100 — tag chips */
  --live:      #059669;  /* emerald-600 — "live" status dot (darker for light bg) */
}

/* ---- Dark theme (site only; resume/letters stay light) ---- */
:root[data-theme="dark"] {
  --fg-strong: #fafafa;  /* near-white — name, headings */
  --fg:        #d4d4d8;  /* zinc-300 — body */
  --fg-muted:  #a1a1aa;  /* zinc-400 — secondary */
  --fg-subtle: #71717a;  /* zinc-500 — labels, dates */
  --border:    #27272a;  /* zinc-800 — hairlines */
  --border-strong: #3f3f46; /* zinc-700 */
  --bg:        #09090b;  /* zinc-950 */

  /* accent stays #2563eb; frame border softens against dark */
  --frame-border: #3f3f46;

  /* site-only extras */
  --panel:     #101012;  /* card surface */
  --panel-2:   #0c0c0e;  /* tag chips */
  --live:      #34d399;  /* emerald-400 — "live" status dot (brighter for dark bg) */
}

/* ---- Reusable primitives ---- */
.label {
  font-family: var(--font-mono);
  font-size: 7.6pt;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.meta {
  font-family: var(--font-mono);
  font-size: 8pt;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hairline {
  border: 0;
  border-top: 1px solid var(--border);
}
a { color: var(--accent); text-decoration: none; }

/* ---- Name frame: gray square + blue corners + full-height scan line & trail ---- */
.name-frame { position: relative; display: inline-block; padding: 10px 16px; border: 2px solid var(--frame-border); }
.name-frame h1 { font-size: 25pt; font-weight: 600; letter-spacing: -0.025em; color: var(--fg-strong); margin: 0; line-height: 1; position: relative; z-index: 2; }
.name-frame .c { position: absolute; width: 14px; height: 14px; z-index: 3; }
.name-frame .tl { top: -2px; left: -2px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.name-frame .tr { top: -2px; right: -2px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.name-frame .bl { bottom: -2px; left: -2px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.name-frame .br { bottom: -2px; right: -2px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.name-frame .scan { position: absolute; top: 0; bottom: 0; left: 39.5%; width: 2px; background: var(--accent); box-shadow: 0 0 7px rgba(37,99,235,0.8); z-index: 3; }
.name-frame .grad { position: absolute; top: 0; bottom: 0; left: 0; right: 60.5%; z-index: 1; background: linear-gradient(90deg, #ffffff 0%, #e1e2e6 100%); }