/* =============================================================
   Ryan Smith Freelance — Design Tokens
   Matte black + off-white foundation, lime accent.
   ============================================================= */

/* ---------- Webfonts ---------- */
/* Both families are fully self-hosted from fonts/ — no external font requests.
   General Sans (display + UI): one variable woff2 spanning weights 200–700, so any weight
   resolves from a single ~38KB file and `font-weight` / `font-variation-settings: 'wght'`
   can be animated.
   JetBrains Mono (mono): static Regular (400) + Medium (500) woff2 — the only weights used. */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLORS — raw palette
     ========================================================= */

  /* Matte black — not true black, slightly warm. Two shades. */
  --ink-900: #0e0e0c;   /* deepest — page background (dark mode) */
  --ink-800: #181815;   /* elevated surface on ink-900 */

  /* Off-white — warm paper tone. Two shades. */
  --bone-50:  #f6f4ee;  /* page background (light mode) */
  --bone-100: #ecebe3;  /* elevated surface on bone-50 */

  /* Grey scale — derived from ink/bone, not pure neutral. */
  --grey-200: #d9d7ce;
  --grey-300: #b8b6ab;
  --grey-400: #8b8a80;
  --grey-500: #60605a;
  --grey-600: #3d3d38;
  --grey-700: #262622;

  /* Lime accent — the one spot of color. */
  --lime-300: #e2f56a;  /* lighter — hover / highlight */
  --lime-400: #c9ea2d;  /* primary lime */
  --lime-500: #a8c816;  /* darker — pressed / on-light text */
  --lime-600: #7d9500;  /* deepest — rare, for on-bone text */

  /* Semantic utility — kept minimal. */
  --danger:  #e5553b;
  --success: #6ab04c;

  /* =========================================================
     COLORS — semantic (light mode default)
     ========================================================= */

  --bg:        var(--bone-50);
  --bg-elev:   var(--bone-100);
  --bg-elev-2: var(--grey-200);  /* secondary elevation — the next ramp rung above --bg-elev */
  --bg-inset:  #ffffff;

  --fg1:       var(--ink-900);   /* primary text */
  --fg2:       var(--grey-600);  /* secondary text */
  --fg3:       var(--grey-500);  /* tertiary / captions */
  --fg-muted:  var(--grey-400);  /* placeholder / disabled */

  --border-1:  var(--grey-200);  /* default hairline */
  --border-2:  var(--grey-300);  /* stronger */

  --accent:         var(--lime-400);
  --accent-hover:   var(--lime-300);
  --accent-press:   var(--lime-500);
  --accent-on:      var(--ink-900);  /* text color on lime surfaces */
  --accent-text:    var(--lime-600); /* lime text on bone — only AA variant */

  --on-ink:    var(--bone-50);       /* text color on ink surfaces */

  /* =========================================================
     TYPOGRAPHY — families + scale
     ========================================================= */

  --font-display: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — modular, 1.2 ratio at the top, tightening toward body. */
  --fs-hero:  clamp(56px, 8vw, 112px);
  --fs-h1:    clamp(40px, 5vw, 64px);
  --fs-h2:    clamp(32px, 3.6vw, 44px);
  --fs-h3:    28px;
  --fs-h4:    22px;
  --fs-lead:  19px;   /* intro / lede — between h4 and body, for section + subsection descriptions */
  --fs-body:  17px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.12em;

  /* =========================================================
     SPACING — 4px base.
     ========================================================= */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* =========================================================
     RADII — restrained. Corners are either crisp or generous, not in-between.
     ========================================================= */
  --r-0:    0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* =========================================================
     SHADOWS — matte, soft, low-saturation. No purple tint.
     ========================================================= */
  --shadow-sm: 0 1px 2px rgba(14,14,12,0.06),
               0 1px 1px rgba(14,14,12,0.04);
  --shadow-md: 0 4px 10px rgba(14,14,12,0.07),
               0 2px 4px rgba(14,14,12,0.05);
  --shadow-lg: 0 18px 40px rgba(14,14,12,0.10),
               0 6px 12px rgba(14,14,12,0.06);
  --shadow-inset: inset 0 0 0 1px rgba(14,14,12,0.06);
  --shadow-focus: 0 0 0 3px rgba(201,234,45,0.45);

  /* =========================================================
     MOTION — see motion/motion.css (GENERATED from motion/tokens/**.json).
     The motion design system (Tier 1 primitives → Tier 2 semantic →
     Tier 3 choreography) is the canonical source of truth for all timing
     and easing. The old seed --dur-*/--ease-* tokens were removed in favor
     of --motion-* ; load motion/motion.css alongside this file.
     ========================================================= */

  /* =========================================================
     LAYOUT — container and grid.
     ========================================================= */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: 32px;
}

/* Dark mode — invert the core surfaces. */
:root[data-theme="dark"] {
  --bg:       var(--ink-900);
  --bg-elev:  var(--ink-800);
  --bg-elev-2: var(--grey-700);  /* secondary elevation — the next ramp rung above --bg-elev */
  --bg-inset: #070706;

  --fg1: var(--bone-50);
  --fg2: var(--grey-300);
  --fg3: var(--grey-400);
  --fg-muted: var(--grey-500);

  --border-1: var(--grey-700);
  --border-2: var(--grey-600);

  --accent-text: var(--lime-300);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.5);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
}

/* =============================================================
   SEMANTIC ELEMENT STYLES — applied to bare tags.
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero, h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
  max-width: 65ch;
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg3);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg3);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--motion-use-hover);
}
a:hover { text-decoration-color: var(--accent-press); }

::selection { background: var(--accent); color: var(--accent-on); }