/* =========================================================================
   Chenhao Yang — Personal Design System
   colors_and_type.css
   Import this first in any artifact built against this system.
   ========================================================================= */

/* ---------- Webfonts (Google Fonts mirrors; replace with self-hosted woff2 if shipping offline) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* ---- Colors: paper / ink ----
     Modern muted greige system. Low chroma (~3-6 in OKLCH), warm but
     not yellow-cream; ink is a desaturated slate, not pure black. */
  --paper:        #F1EFEA;   /* soft warm greige */
  --paper-2:      #E7E4DD;   /* recessed surface */
  --paper-3:      #D9D5CC;   /* hover/pressed surface */
  --ink:          #1F2227;   /* desaturated slate, not pure black */
  --ink-2:        #4A4D54;   /* secondary text */
  --ink-3:        #7B7E84;   /* tertiary, captions */
  --ink-4:        #ADAFB3;   /* placeholders, disabled */
  --rule:         #D4D0C7;   /* hairlines */
  --rule-strong:  #B5B0A4;

  /* ---- Colors: signal & accent ----
     Soft slate-blue replaces saturated cobalt. Clay replaces rust. */
  --signal:       #4A6FA0;   /* dusty slate-blue — links, primary */
  --signal-2:     #36537A;   /* hover */
  --signal-tint:  #E1E6EE;   /* soft surface */
  --rust:         #A8624D;   /* clay / terracotta accent */
  --rust-2:       #834A38;

  /* ---- Semantic — all low-chroma ---- */
  --ok:           #5C7A5E;   /* sage */
  --ok-tint:      #E0E6DC;
  --warn:         #A8884A;   /* dusty mustard */
  --warn-tint:    #ECE5D0;
  --err:          #A8624D;   /* same family as rust, kept warm */
  --err-tint:     #EBDBD2;

  /* ---- Type families ---- */
  --ff-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ff-sans:  'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ff-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Type scale (rem) ---- */
  --t-11: 0.6875rem;  /* 11 */
  --t-12: 0.75rem;    /* 12 */
  --t-13: 0.8125rem;  /* 13 */
  --t-14: 0.875rem;   /* 14 */
  --t-16: 1rem;       /* 16 — body */
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --t-80: 5rem;

  /* ---- Line heights ---- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* ---- Letter-spacing ---- */
  --ls-tight:  -0.02em;
  --ls-normal: 0em;
  --ls-mono:   0.02em;
  --ls-label:  0.06em;   /* uppercase mono labels */

  /* ---- Weights ---- */
  --w-300: 300;
  --w-400: 400;
  --w-500: 500;
  --w-600: 600;
  --w-700: 700;

  /* ---- Spacing (4px base) ---- */
  --s-2:    2px;
  --s-4:    4px;
  --s-8:    8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-20:  20px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-96:  96px;
  --s-128: 128px;

  /* ---- Radii ---- */
  --r-0:    0px;
  --r-1:    2px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --b-hair:   1px solid var(--rule);
  --b-strong: 1px solid var(--ink);
  --b-thick:  2px solid var(--ink);

  /* ---- Shadows (used very sparingly) ---- */
  --shadow-1: 0 1px 0 var(--rule);
  --shadow-2: 0 8px 24px -12px rgba(21,23,26,0.18);

  /* ---- Motion ---- */
  --ease:    cubic-bezier(0.2, 0.7, 0.1, 1);
  --d-micro: 120ms;
  --d-std:   200ms;
  --d-slow:  400ms;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --text-max:    680px;
  --topbar-h:    56px;
}

/* Optional dark mode — light-first system, dark is opt-in via [data-theme="dark"] */
[data-theme="dark"] {
  --paper:        #1F2227;
  --paper-2:      #272A30;
  --paper-3:      #313438;
  --ink:          #ECEAE3;
  --ink-2:        #BFBDB5;
  --ink-3:        #8C8E90;
  --ink-4:        #5C5E62;
  --rule:         #353840;
  --rule-strong:  #4D5058;
  --signal:       #8AA6CC;
  --signal-2:     #B1C5DD;
  --signal-tint:  #2A3441;
  --rust:         #C68876;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  font-weight: var(--w-400);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-tint); color: var(--ink); }

/* =========================================================================
   3. SEMANTIC ELEMENTS
   ========================================================================= */

/* H1 — page title, serif */
h1, .h1 {
  font-family: var(--ff-serif);
  font-weight: var(--w-500);
  font-size: var(--t-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 var(--s-24);
}

/* H2 — section title, serif */
h2, .h2 {
  font-family: var(--ff-serif);
  font-weight: var(--w-500);
  font-size: var(--t-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 var(--s-16);
}

/* H3 — subsection, sans medium */
h3, .h3 {
  font-family: var(--ff-sans);
  font-weight: var(--w-600);
  font-size: var(--t-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0 0 var(--s-12);
}

/* H4 */
h4, .h4 {
  font-family: var(--ff-sans);
  font-weight: var(--w-600);
  font-size: var(--t-16);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-8);
}

/* H5 — label/eyebrow style, mono uppercase */
h5, .h5, .eyebrow {
  font-family: var(--ff-mono);
  font-weight: var(--w-500);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  margin: 0 0 var(--s-8);
}

/* H6 */
h6, .h6 {
  font-family: var(--ff-sans);
  font-weight: var(--w-600);
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin: 0 0 var(--s-4);
}

/* Display — serif, bigger than h1, used on hero */
.display {
  font-family: var(--ff-serif);
  font-weight: var(--w-400);
  font-size: var(--t-80);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
}

/* Body */
p, .body {
  font-family: var(--ff-sans);
  font-size: var(--t-16);
  line-height: var(--lh-loose);
  color: var(--ink-2);
  margin: 0 0 var(--s-16);
  text-wrap: pretty;
}

.lead {
  font-family: var(--ff-serif);
  font-size: var(--t-24);
  line-height: var(--lh-normal);
  color: var(--ink);
  font-weight: var(--w-300);
  letter-spacing: -0.005em;
}

small, .small {
  font-size: var(--t-13);
  color: var(--ink-3);
}

.caption {
  font-family: var(--ff-mono);
  font-size: var(--t-12);
  letter-spacing: var(--ls-mono);
  color: var(--ink-3);
}

/* Mono utilities */
.mono { font-family: var(--ff-mono); }
.mono-label {
  font-family: var(--ff-mono);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
}
.mono-num {
  font-family: var(--ff-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: var(--ls-mono);
}

/* Links */
a {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--d-micro) var(--ease), color var(--d-micro) var(--ease);
}
a:hover { text-decoration-thickness: 2px; color: var(--signal-2); }
a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Code */
code, kbd, samp, pre {
  font-family: var(--ff-mono);
  font-size: 0.95em;
}
code {
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
  border: 1px solid var(--rule);
}
pre {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: var(--s-16);
  overflow-x: auto;
  font-size: var(--t-13);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-16);
}
pre code {
  background: transparent;
  padding: 0;
  border: 0;
}

/* HR — hairline */
hr {
  border: 0;
  border-top: var(--b-hair);
  margin: var(--s-32) 0;
}

/* Lists */
ul, ol { padding-left: 1.25em; margin: 0 0 var(--s-16); color: var(--ink-2); }
li { margin: 0 0 var(--s-4); line-height: var(--lh-loose); }

/* Blockquote — serif italic, hairline left rule */
blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--t-20);
  line-height: var(--lh-normal);
  color: var(--ink);
  border-left: 2px solid var(--ink);
  padding: var(--s-4) 0 var(--s-4) var(--s-20);
  margin: 0 0 var(--s-24);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-14);
}
th, td {
  text-align: left;
  padding: var(--s-12) var(--s-16);
  border-bottom: var(--b-hair);
}
th {
  font-family: var(--ff-mono);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  font-weight: var(--w-500);
}

/* =========================================================================
   4. UTILITIES
   ========================================================================= */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-24);
}
.text-col { max-width: var(--text-max); }

.grid-paper {
  background-image:
    linear-gradient(to right, rgba(21,23,26,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,23,26,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dot-divider::before { content: '·  ·  ·  ·  ·  ·'; letter-spacing: 0.5em; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}