/* ============================================================
   jtsyn — Colors & Type
   The foundation. Import this first; everything else builds on it.

   Ported from the Claude Design project (jtsyn/colors_and_type.css).
   The only change: the @font-face blocks are gone. Sora and Nothing You
   Could Do are loaded from Google Fonts in index.html instead of shipping
   the TTFs, which is what the site has always done and keeps the deploy
   small.
   ============================================================ */

:root {
  /* ====================================================
     COLORS
     Two brand colors only: #1976D2 (signal) and #FFFFFF (page).
     Everything else is a derived neutral or a tightly-scoped accent.
     ==================================================== */

  /* Brand */
  --blue-500: #1976D2;       /* The brand. Use for primary actions, links, key marks. */
  --blue-600: #1565C0;       /* Hover / pressed on light backgrounds. */
  --blue-700: #0D47A1;       /* Pressed / focused border. Rare. */
  --blue-400: #42A5F5;       /* Lighter accent — illustrations, secondary marks. */
  --blue-100: #E3F0FB;       /* Selection halo, soft fills. */
  --blue-050: #F2F8FD;       /* Pale tint background panels. */

  /* Page */
  --white:    #FFFFFF;
  --ink-050:  #FAFBFC;       /* Off-white — section break. */
  --ink-100:  #F2F4F6;       /* Subtle fill (cards, code). */
  --ink-200:  #E4E7EB;       /* Borders, dividers. */
  --ink-300:  #C9CFD6;       /* Disabled outline. */
  --ink-400:  #8A93A0;       /* Tertiary text, placeholder. */
  --ink-500:  #5C6573;       /* Secondary text. */
  --ink-700:  #2B3340;       /* Body text. */
  --ink-900:  #0F1620;       /* Display text, near-black. */

  /* Semantic */
  --success:  #1F8A5B;
  --warning:  #C77A05;
  --danger:   #C8362A;
  --success-bg: #E8F4EE;
  --warning-bg: #FBF1DC;
  --danger-bg:  #FBEAE7;

  /* Foreground / background semantic */
  --fg-1: var(--ink-900);    /* Display, headlines */
  --fg-2: var(--ink-700);    /* Body */
  --fg-3: var(--ink-500);    /* Secondary */
  --fg-4: var(--ink-400);    /* Tertiary, hints */
  --fg-on-blue: var(--white);
  --fg-accent: var(--blue-500);

  --bg-1: var(--white);      /* Page */
  --bg-2: var(--ink-050);    /* Sections */
  --bg-3: var(--ink-100);    /* Cards / inset */
  --bg-tint: var(--blue-050);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-900);
  --border-accent: var(--blue-500);

  --focus-ring: 0 0 0 3px rgba(25, 118, 210, 0.35);

  /* ====================================================
     TYPE — families
     ==================================================== */
  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script: "Nothing You Could Do", "Caveat", "Bradley Hand", cursive;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — modular, slightly tightened for Sora's wide letterforms.
     1.250 ratio (major third). */
  --t-12: 0.75rem;     /* 12px — micro */
  --t-13: 0.8125rem;   /* 13px — caption */
  --t-14: 0.875rem;    /* 14px — small body, UI labels */
  --t-16: 1rem;        /* 16px — body */
  --t-18: 1.125rem;    /* 18px — lede */
  --t-20: 1.25rem;     /* 20px — h5 */
  --t-24: 1.5rem;      /* 24px — h4 */
  --t-30: 1.875rem;    /* 30px — h3 */
  --t-38: 2.375rem;    /* 38px — h2 */
  --t-48: 3rem;        /* 48px — h1 */
  --t-64: 4rem;        /* 64px — display */
  --t-80: 5rem;        /* 80px — hero */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;     /* display */
  --tracking-snug:   -0.01em;     /* headings */
  --tracking-normal:  0em;
  --tracking-loose:   0.04em;     /* eyebrows / labels */
  --tracking-caps:    0.08em;     /* ALL-CAPS labels */

  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ====================================================
     SPACING — 4px base, 8px main rhythm
     ==================================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ====================================================
     RADII — restrained. We round, but not too much.
     ==================================================== */
  --r-1: 4px;        /* chips, tags */
  --r-2: 6px;        /* buttons, inputs */
  --r-3: 10px;       /* cards */
  --r-4: 16px;       /* large surfaces */
  --r-full: 999px;   /* pills, avatars */

  /* ====================================================
     SHADOWS — soft and cool-tinted; never warm/gray-brown.
     ==================================================== */
  --shadow-1: 0 1px 2px rgba(15, 22, 32, 0.05),
              0 1px 1px rgba(15, 22, 32, 0.04);
  --shadow-2: 0 2px 6px rgba(15, 22, 32, 0.06),
              0 1px 2px rgba(15, 22, 32, 0.05);
  --shadow-3: 0 8px 24px rgba(15, 22, 32, 0.08),
              0 2px 6px rgba(15, 22, 32, 0.05);
  --shadow-4: 0 24px 60px rgba(15, 22, 32, 0.14),
              0 8px 20px rgba(15, 22, 32, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 0 0 1px rgba(15, 22, 32, 0.04);

  /* ====================================================
     MOTION — quick, confident, no bounces.
     ==================================================== */
  --ease-out:    cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   Semantic class tokens — drop these onto elements directly.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--t-80);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--t-48);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--t-38);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--t-30);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--t-24);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h5, h5 {
  font-family: var(--font-sans);
  font-size: var(--t-20);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lede {
  font-size: var(--t-18);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body, p {
  font-size: var(--t-16);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--t-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.caption {
  font-size: var(--t-13);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.eyebrow {
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.15;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  padding: 0.08em 0.36em;
  border-radius: var(--r-1);
  color: var(--ink-900);
}

a {
  color: var(--blue-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-600); }
a:active { color: var(--blue-700); }

::selection { background: var(--blue-100); color: var(--ink-900); }