/* Premise Design System -- single stylesheet.
   MERGED 2026-07-21: this file previously @imported four files from tokens/.
   That built a render-blocking chain (document -> styles.css -> 4 token files
   -> Google Fonts CSS -> woff2), five levels deep, because each level could
   only be discovered after the previous one was fetched and parsed. The token
   files are now inlined below and tokens/ has been DELETED -- there is no build
   step that could regenerate this file from them, so keeping both copies would
   only guarantee they drift. Edit the sections here.

   The webfont @import was hoisted out of CSS into a <link> in each page head
   (with preconnect), so the fonts are discovered at level two instead of five.
   Link this file as /styles.css?v=YYYYMMDD; bump the date when you edit it. */

/* ===== fonts ===== */
/* Premise webfonts.
   The public marketing pages load Inter (UI/sans, matching the live site) and the
   codebase's literary serif Newsreader (editorial headings + article prose). Both
   from Google Fonts; the codebase ships no font binaries. Geist Mono stays as a
   rarely-used monospace fallback. The webfont request itself is NOT here: it is a
   <link> in each page head, so it is not gated behind this stylesheet. If you
   self-host binaries later, add @font-face rules here and drop that <link>.
     - Inter       — UI chrome, nav, body copy, buttons, metadata
     - Newsreader  — post titles, page titles, blockquotes, article prose */

/* ===== colors ===== */
/* Premise — color tokens (dark).
   The public marketing identity: a deep blue-black page, cool gray text, and a
   violet→pink accent used mostly as a gradient (hero wordmark, the "Start
   writing" CTA). In body content the accent stays a single violet. Reference the
   semantic aliases at the bottom in components — not the raw scale. */
:root {
  /* Blue-black surface scale (darkest → raised) */
  --ink-950:  #0d131f;  /* deepest: count badges, footer, sunken wells */
  --ink-900:  #111827;  /* page background (gray-900) */
  --ink-850:  #161d2b;  /* alt section band */
  --ink-800:  #1b2334;  /* cards / panels */
  --ink-700:  #232c3d;  /* raised fill, thumbnails */

  /* Hairlines */
  --line:      #2b3547;  /* default border */
  --line-2:    #374151;  /* stronger border (gray-700) */

  /* Cool gray text */
  --gray-50:   #f3f4f6;  /* primary text / headings */
  --gray-300:  #d1d5db;  /* body */
  --gray-400:  #9ca3af;  /* secondary / muted */
  --gray-500:  #6b7280;  /* faint metadata */

  /* Accent — violet, with pink only inside gradients */
  --violet:      #8b5cf6;  /* accent base */
  --violet-light:#a78bfa;  /* prominent-on-dark: links, eyebrows, active text */
  --violet-deep: #7c3aed;  /* pressed */
  --pink:        #ec4899;  /* gradient partner only — never a flat body color */
  --violet-tint: rgba(139, 92, 246, 0.16);  /* active pill fill */
  --violet-ring: rgba(139, 92, 246, 0.5);   /* active pill border */

  /* Signature gradients */
  --grad-brand: linear-gradient(120deg, #a78bfa 0%, #ec4899 100%); /* @kind color */
  --grad-cta:   linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); /* @kind color */
  --cta-glow:   0 0 18px rgba(236, 72, 153, 0.35);

  /* Status (dark-tuned; used sparingly) */
  --ok:   #34d399;
  --warn: #fbbf24;
  --bad:  #f87171;

  /* ---- Semantic aliases — reference these ---- */
  --surface-page:   var(--ink-900);
  --surface-band:   var(--ink-850);
  --surface-card:   var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-raised: var(--ink-700);
  --surface-thumb:  var(--ink-700);

  --text-strong: var(--gray-50);
  --text-body:   var(--gray-300);
  --text-muted:  var(--gray-400);
  --text-meta:   var(--gray-500);

  --border:        var(--line);
  --border-strong: var(--line-2);

  --accent:        var(--violet);        /* icons, focus, active-pill badge */
  --accent-strong: var(--violet-light);  /* prominent on dark: links, eyebrows */
  --accent-tint:   var(--violet-tint);
  --accent-pressed:var(--violet-deep);

  /* CTA (the gradient "Start writing" pill) */
  --btn-primary-bg:    var(--grad-cta);
  --btn-primary-fg:    #ffffff;
  --btn-primary-glow:  var(--cta-glow);
}

/* ===== typography ===== */
/* Premise — type tokens.
   Newsreader (serif) sets the bookish voice for anything editorial: page titles,
   post titles, article prose. Geist (sans) carries UI chrome, labels and metadata.
   Geist Mono appears rarely, for code or technical tags. */
:root {
  --font-serif: 'Newsreader', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --text-xs:   12px;   /* metadata, badge, eyebrow */
  --text-sm:   13px;   /* helper, chip */
  --text-base: 15px;   /* secondary body */
  --text-md:   16px;   /* default UI body */
  --text-lg:   18px;   /* excerpt, lede */
  --text-xl:   21px;   /* card title */
  --text-2xl:  28px;   /* section heading */
  --text-3xl:  40px;   /* page title */
  --text-4xl:  52px;   /* hero display */

  /* Reading measure for article prose */
  --prose-body: 19px;
  --prose-leading: 1.72;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Display letter-spacing — serif titles tighten slightly */
  --tracking-display: -0.022em;
  --tracking-tight:   -0.01em;
  --tracking-eyebrow: 0.14em;  /* uppercase eyebrow labels */
}

/* ===== spacing ===== */
/* Premise — spacing, radius, shadow tokens.
   Spacing follows a soft 4px rhythm. Radii are generous and rounded (bookish, not
   sharp). Shadows are barely-there: paper wants hairline borders, not float. */
:root {
  /* Spacing rhythm */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-2xl: 40px;
  --sp-3xl: 64px;

  /* Radius — rounded cards are core to the brand */
  --rad-sm: 6px;
  --rad:    10px;   /* default: pills done separately */
  --rad-lg: 14px;   /* cards */
  --rad-xl: 18px;   /* large surfaces */
  --rad-pill: 999px;

  /* Shadows — dark; depth from deep, soft shadows + hairline borders */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 18px 40px -22px rgba(0,0,0,0.7);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,0.75);

  /* Layout */
  --content-measure: 760px;   /* article reading column */
  --page-max: 1100px;         /* blog index max width */
  --nav-h: 67px;              /* measured height of the shared fixed <custom-navbar> */

  /* Motion — calm, no bounce */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur: 0.18s; /* @kind other */
}

/* The bar collapses to the hamburger layout at 768px and gets shorter.
   Anything that clears it or sticks below it reads --nav-h, so the token has
   to track the real height or a strip of scrolling content shows through.
   Must come after the :root above, or that later definition wins. */
@media (max-width: 768px) {
  :root { --nav-h: 62px; }
}