/*
 * FLOWERSHOW THEME (DRAFT): SAGE
 *
 * Inspired by https://typesafe.ai/blog (a Framer site), measured
 * 2026-10-19 with scripts/measure-site.mjs and the gstack `browse` CLI.
 * Every value traces to sage-draft/design-tokens.json.
 *
 * The look: a flat grey-green page (#abbab9), near-black ink (#1e1e1e),
 * huge tight grotesk titles in a softer #3d3d3d, square corners, small
 * monospace labels set on black pills, white "tab" pills for navigation,
 * a 1px dashed rule beside listed posts, and one pink (#d45bb6) used only
 * as a marker (active category, hovered post rule).
 *
 * FONT SWAPS (design-tokens.json fontNotes)
 * - Die Grotesk C (Klim, commercial) -> Inter Tight (OFL). Closest of 12
 *   open grotesks by set width / x-height / cap height. Inter Tight sets
 *   ~6% wider, so every measured letter-spacing is reduced by 0.02em.
 *   Licence holders can set --font-body / --font-heading back locally.
 * - LisaTerminal Paper 2X3Y (commercial) for tags and labels ->
 *   JetBrains Mono (OFL), which the site already uses for labels and code.
 *
 * DERIVED PALETTE
 * - The site has no dark mode. The dark palette inverts HSL lightness of
 *   each measured light role, same hue and saturation: page #abbab9 ->
 *   #455453, ink #1e1e1e -> #e1e1e1, heading/muted #3d3d3d -> #c2c2c2.
 *   Ink surfaces (tag pills, featured card, footer) and the pink marker
 *   stay as measured in both modes.
 * - Callouts take the site's own brand tokens (green #03aa5c, teal
 *   #09aea1, grey #858585, pink #d45bb6); warning and danger have no site
 *   counterpart and keep core's colours.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* =======================
    TOKENS
========================== */

:root {
  --font-heading: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-base: 1.0625rem;   /* 17px article paragraph */
  --radius: 0;                   /* buttons, images, pills: 0px */
  --navbar-height: 2.25rem;      /* nav pills are 36px tall, flush to the top */

  --color-l-background: #abbab9; /* body background */
  --color-l-foreground: #1e1e1e; /* text on the page background */
  --color-l-accent: #d45bb6;     /* active category / hovered rule */

  --color-d-background: #455453; /* derived: inverted lightness */
  --color-d-foreground: #e1e1e1; /* derived */
  --color-d-accent: #d45bb6;     /* derived: kept, marker only */

  /* code blocks have no counterpart on the site. Core's Prism palette is
     built for a near-white / #2f2f2f ground, and on the sage tint its
     tokens fell to ~1.5:1, so blocks sit on the site's own white tab
     colour (#fefefe) and, in dark, on its ink (#1e1e1e) */
  --color-code-bg: #fefefe;
  --color-code-bg-dark: #1e1e1e;

  /* callouts from the site's own brand tokens (material.md) */
  --callout-note-color: #1e1e1e;
  --callout-tip-color: #09aea1;
  --callout-success-color: #03aa5c;
  --callout-example-color: #d45bb6;
  --callout-quote-color: #858585;

  /* tag pills: black pill, light mono text (category tags in the list) */
  --color-tag-pill-text: #dedede;
  --color-tag-pill-bg: #1e1e1e;
  --color-tag-pill-text-hover: #d45bb6;
  --color-tag-pill-bg-hover: #1e1e1e;

  /* CTA: the "Contact Us" pill */
  --color-cta-bg: #1e1e1e;
  --color-cta-bg-hover: #3d3d3d;
  --color-cta-text: #fefefe;

  /* listing surfaces */
  --list-max-width: 50rem;       /* 800px article column */
  --list-card-radius: 0;
  --list-avatar-shape: 0;
  --list-title-font: var(--font-heading);
  --list-meta-transform: none;
  --post-max-width: 50rem;
  --post-body-size: 1.0625rem;
  --post-hero-radius: 0;
  --changelog-marker-radius: 0;
}

:root,
:root[data-theme="light"] {
  --sage-heading: #3d3d3d;       /* h1/h2 colour */
  --sage-ink: #1e1e1e;           /* pills, footer */
  --sage-ink-soft: #1e1e1edb;    /* featured card, list titles */
  --sage-ink-text: #fefefe;      /* text on ink surfaces */
  --sage-label-text: #dedede;    /* mono text on pills */
  --sage-tab: #fefefe;           /* nav pills */
  --sage-hairline: #99999940;    /* table border */
  --sage-th: #9999991a;          /* table header fill */
  --sage-code-tint: #1e1e1e1f;   /* inline code */
  --sage-rule: #1e1e1e;          /* dashed list rule */
}

/* foreground ramp. Core's fixed OKLCH steps assume a white or near-black
   page; on the sage (OKLCH L ~0.77) its muted steps (400-600) fall to
   1.5-4.1:1 and its hairline steps (100/200) vanish. Re-anchored so text
   steps (400+) clear 4.5:1 and 600 lands on the site's muted #3d3d3d
   (L 0.35). Derived, measured against the contact sheet's axe pass. */
:root,
:root[data-theme="light"] {
  --color-foreground-50: oklch(from var(--color-foreground) 0.72 c h);
  --color-foreground-100: oklch(from var(--color-foreground) 0.68 c h);
  --color-foreground-200: oklch(from var(--color-foreground) 0.62 c h);
  --color-foreground-300: oklch(from var(--color-foreground) 0.42 c h); /* dates use it */
  --color-foreground-400: oklch(from var(--color-foreground) 0.4 c h);
  --color-foreground-500: oklch(from var(--color-foreground) 0.37 c h);
  --color-foreground-600: oklch(from var(--color-foreground) 0.35 c h);
  --color-foreground-700: oklch(from var(--color-foreground) 0.3 c h);
  --color-foreground-800: oklch(from var(--color-foreground) 0.25 c h);
  --color-foreground-900: oklch(from var(--color-foreground) 0.2 c h);
  --sage-code-text: #3d3d3d;     /* measured inline code colour */
}

/* dark ramp: page L ~0.45, so text steps need L >= 0.82 for 4.5:1 */
:root[data-theme="dark"] {
  --color-foreground-50: oklch(from var(--color-foreground) 0.4 c h);
  --color-foreground-100: oklch(from var(--color-foreground) 0.53 c h);
  --color-foreground-200: oklch(from var(--color-foreground) 0.58 c h);
  --color-foreground-300: oklch(from var(--color-foreground) 0.8 c h); /* dates use it */
  --color-foreground-400: oklch(from var(--color-foreground) 0.82 c h);
  --color-foreground-500: oklch(from var(--color-foreground) 0.84 c h);
  --color-foreground-600: oklch(from var(--color-foreground) 0.86 c h);
  --color-foreground-700: oklch(from var(--color-foreground) 0.9 c h);
  --color-foreground-800: oklch(from var(--color-foreground) 0.94 c h);
  --color-foreground-900: oklch(from var(--color-foreground) 0.97 c h);
  --sage-code-text: #e1e1e1;     /* derived: #c2c2c2 was 3.4:1 on the tint */
}

:root[data-theme="dark"] {
  --sage-heading: #c2c2c2;       /* derived */
  --sage-ink: #1e1e1e;           /* kept */
  --sage-ink-soft: #1e1e1edb;    /* kept */
  --sage-ink-text: #fefefe;      /* kept */
  --sage-label-text: #dedede;    /* kept */
  --sage-tab: #010101;           /* derived: inverted #fefefe */
  --sage-hairline: #66666640;    /* derived */
  --sage-th: #6666661a;          /* derived */
  --sage-code-tint: #e1e1e11f;   /* derived */
  --sage-rule: #e1e1e1;          /* derived */
  --callout-note-color: #e1e1e1; /* derived: note follows the ink */
}

/* prose colours: core maps body to --color-foreground-600, which is a
   lighter step than the measured ink; the site sets body text to the ink.
   `@apply prose` compiles onto .rendered-mdx:not(.is-plain), not .prose */
.prose,
.rendered-mdx:not(.is-plain) {
  --tw-prose-body: var(--color-foreground);
  --tw-prose-headings: var(--color-foreground);
  --tw-prose-lead: var(--color-foreground);
  --tw-prose-links: var(--color-foreground);
  --tw-prose-bold: var(--color-foreground);
  --tw-prose-counters: var(--color-foreground);
  --tw-prose-bullets: var(--color-foreground);
  --tw-prose-quotes: var(--color-foreground);
  --tw-prose-quote-borders: var(--sage-rule);
  --tw-prose-code: var(--sage-heading);
  --tw-prose-pre-code: var(--color-foreground);
  --tw-prose-hr: var(--sage-hairline);
  --tw-prose-th-borders: var(--sage-hairline);
  --tw-prose-td-borders: var(--sage-hairline);
  --tw-prose-invert-body: var(--color-foreground);
  --tw-prose-invert-headings: var(--color-foreground);
  --tw-prose-invert-lead: var(--color-foreground);
  --tw-prose-invert-links: var(--color-foreground);
  --tw-prose-invert-bold: var(--color-foreground);
  --tw-prose-invert-counters: var(--color-foreground);
  --tw-prose-invert-bullets: var(--color-foreground);
  --tw-prose-invert-quotes: var(--color-foreground);
  --tw-prose-invert-quote-borders: var(--sage-rule);
  --tw-prose-invert-code: var(--sage-heading);
  --tw-prose-invert-pre-code: var(--color-foreground);
  --tw-prose-invert-hr: var(--sage-hairline);
  --tw-prose-invert-th-borders: var(--sage-hairline);
  --tw-prose-invert-td-borders: var(--sage-hairline);
}

body {
  color: var(--color-foreground);
}

/* =======================
    CONTENT: TYPE
========================== */

/* article column 800px; paragraph 17px / 19.04px, 15px apart */
.rendered-mdx:not(.is-plain) {
  max-width: 50rem;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.12;
  letter-spacing: 0;
}

.rendered-mdx:not(.is-plain) :where(p, li, dd, dt) {
  font-size: var(--font-size-base) !important;
  line-height: 1.12 !important;
}

.rendered-mdx:not(.is-plain) p {
  margin-top: 0;
  margin-bottom: 15px;
}

/* page title: 54px at 390 wide -> 150px at 1440, line-height 0.8,
   medium weight, capitalised, centred, #3d3d3d */
.page-header-title,
.rendered-mdx:not(.is-plain) h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.375rem, 9.4vw + 1.25rem, 9.375rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: var(--sage-heading);
}

.page-header-title {
  text-align: center;
}

.page-header-description {
  text-align: center;
  color: var(--color-foreground);
}

/* h2: 64px (56px on phones), regular, 0.9 line-height, wide tracking,
   capitalised, #3d3d3d; 60px above, 15px below */
.rendered-mdx:not(.is-plain) h2 {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--sage-heading);
  margin-top: 60px;
  margin-bottom: 15px;
}

/* h3: 30px (24px on phones) medium, line-height 1, ink */
.rendered-mdx:not(.is-plain) h3 {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
  margin-top: 40px;
  margin-bottom: 15px;
}

/* h4: 23px medium, line-height 0.9 */
.rendered-mdx:not(.is-plain) :is(h4, h5, h6) {
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--color-foreground);
  margin-top: 30px;
  margin-bottom: 15px;
}

@media (max-width: 809px) {
  .rendered-mdx:not(.is-plain) h2 { font-size: 3.5rem; margin-top: 50px; }
  .rendered-mdx:not(.is-plain) h3 { font-size: 1.5rem; }
}

/* links: ink, underlined; hover does not change on the site. Not listing
   links: post titles on the site are not underlined */
.rendered-mdx:not(.is-plain) a:where(:not(.tag-pill, .list-component *)) {
  color: var(--color-foreground);
  text-decoration: underline;
  text-decoration-color: currentColor;
  font-weight: inherit;
}

/* inline code: JetBrains Mono 300 at 0.8em, ink tint, 3px radius.
   :root raises it over Prism's :root[data-theme="dark"] code[class*=language-] */
:root .rendered-mdx:not(.is-plain) :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--sage-code-text);
  background-color: var(--sage-code-tint);
  border-radius: 3px;
  padding: 0 0.4em; /* 5.44px at 13.6px */
  line-height: inherit;
}
.rendered-mdx:not(.is-plain) :not(pre) > code::before,
.rendered-mdx:not(.is-plain) :not(pre) > code::after {
  content: none !important;
}

/* code blocks: no counterpart on the site; same tint and mono as inline */
.rendered-mdx:not(.is-plain) pre,
.rendered-mdx:not(.is-plain) pre code {
  font-family: var(--font-mono);
  font-weight: 400;
}
:root .rendered-mdx:not(.is-plain) pre code {
  background: transparent; /* Prism paints each line #2f2f2f in dark mode */
}
.rendered-mdx:not(.is-plain) pre {
  border-radius: 3px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* task-list checkboxes: forms plugin paints them blue (#2563eb); ink here */
.rendered-mdx .contains-task-list input[type="checkbox"] {
  border-color: var(--color-foreground);
  border-radius: 0;
  color: var(--color-foreground);
  background-color: transparent;
}
.rendered-mdx .contains-task-list input[type="checkbox"]:checked {
  background-color: var(--color-foreground);
}

/* blockquote: no counterpart; the post list's 1px dashed ink rule */
.rendered-mdx:not(.is-plain) blockquote {
  border-left: 1px dashed var(--sage-rule);
  padding-left: 10px;
  font-style: normal;
  font-weight: 400;
}

/* tables: 1px hairline, 8px radius, 10px cells, tinted header */
.rendered-mdx:not(.is-plain) table {
  border: 1px solid var(--sage-hairline);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.rendered-mdx:not(.is-plain) :is(th, td) {
  padding: 10px !important;
}
.rendered-mdx:not(.is-plain) thead th {
  background-color: var(--sage-th);
}

/* images: square, like every image on the site (radius 0) */
.rendered-mdx img {
  border-radius: 0;
}

/* callouts: square, keep core's tinted fill. Titles in the callout colour
   were 1.3-1.7:1 on the sage, so the title text is ink and only the icon
   carries the colour */
.rendered-mdx [data-callout] {
  border-radius: 0;
}
.rendered-mdx [data-callout] > [data-callout-title] {
  color: var(--color-foreground);
}
.rendered-mdx [data-callout] > [data-callout-title]::before {
  background-color: var(--callout-color);
}

/* =======================
    TAGS AND LABELS
    category tags are black pills with small mono text, 2px 6px 5px
========================== */

.tag-pill {
  font-family: var(--font-mono);
  font-size: 0.8125rem;           /* 14px LisaTerminal -> 13px JetBrains */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 0;
  padding: 2px 6px 5px;
}

.list-component-item-eyebrow,
.post-eyebrow,
.toc-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;              /* "Categories" label: 12px mono 300 */
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-foreground);
}

/* =======================
    NAVBAR
    bar is transparent; every item is its own white pill, 18px medium
========================== */

.site-navbar,
.site-navbar.is-scrolled {
  background-color: var(--color-background);
  box-shadow: none;
}

.site-navbar-inner {
  padding: 0;
}

.site-navbar-site-title,
.site-navbar-link,
.site-navbar-dropdown-trigger {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 5px;
  background-color: var(--sage-tab);
  color: var(--color-foreground);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}

.site-navbar-links-container {
  align-self: stretch;
  gap: 4px;
}

.site-navbar-cta-button {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 0 5px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
}

/* breadcrumbs: core paints them in the accent, which is 1.75:1 on the
   page; the site's small labels are ink mono */
.page-header-breadcrumbs,
.page-header-breadcrumb-link,
.page-header-breadcrumb-separator {
  font-family: var(--font-mono);
  color: var(--color-foreground);
}

/* =======================
    LISTINGS
    posts sit right of a 1px dashed rule, 10px in; the rule turns pink on
    hover; titles 30px medium, 0.9 line-height, ink at 86%
========================== */

.list-component {
  --list-rule-color: transparent; /* no hairlines between posts */
}
.list-component:not([data-view]) .list-component-item,
.list-component[data-view="list"] .list-component-item,
.list-component[data-view="compact"] .list-component-item {
  border-left: 1px dashed var(--sage-rule);
  border-bottom: 0;
  padding-left: 10px;
  transition: border-color 0.5s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.list-component:not([data-view]) .list-component-item + .list-component-item,
.list-component[data-view="list"] .list-component-item + .list-component-item {
  margin-top: 50px; /* 50px between posts on /blog */
}
.list-component:not([data-view]) .list-component-item:hover,
.list-component[data-view="list"] .list-component-item:hover,
.list-component[data-view="compact"] .list-component-item:hover {
  border-left-color: var(--color-accent);
}

.list-component-item-headline {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--sage-ink-soft);
}
:root[data-theme="dark"] .list-component-item-headline {
  color: var(--color-foreground);
}

.list-component-item-summary {
  font-size: var(--font-size-base);
  line-height: 1.12;
  color: var(--color-foreground);
}

/* featured post: the dark card at the top of /blog, white 48px title */
.list-component--magazine .list-component-item--featured {
  background-color: var(--sage-ink-soft);
  color: var(--sage-ink-text);
  padding: 40px;
}
.list-component--magazine .list-component-item--featured .list-component-item-headline,
.list-component--magazine .list-component-item--featured .list-component-item-summary,
.list-component--magazine .list-component-item--featured .list-component-item-eyebrow,
.list-component--magazine .list-component-item--featured .list-component-item-meta {
  color: var(--sage-ink-text);
}

/* =======================
    FOOTER
    black band, light 15px links
========================== */

.site-footer {
  background-color: var(--sage-ink);
  color: var(--sage-ink-text);
  border-top: 0;
}
.site-footer :is(.site-footer-navigation-link, .site-footer-copyright, .site-footer-navigation-title, .site-footer-publication-name, .site-footer-social-link) {
  color: var(--sage-ink-text);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
}

/* listing pages put the title in a flex row with the RSS link; let it fill
   the row so it centres like the site's "Thoughts" */
.page-header-title-row .page-header-title {
  flex: 1 1 auto;
}

/* hero CTA: core fills it with the accent and page-coloured text (1.75:1);
   the site's call to action is the black "Contact Us" pill */
.page-hero-cta:nth-of-type(1) {
  border-radius: 0;
  background-color: var(--sage-ink);
  color: var(--sage-ink-text);
}