/*
 * FLOWERSHOW THEME (DRAFT): CODESTORAGE
 *
 * Inspired by the visual style of code.storage by the Pierre Computer
 * Company: https://code.storage/
 *
 * code.storage's real look uses BerkeleyMono, a commercial font
 * (berkeleygraphics.com) that cannot be redistributed via @import in an
 * open theme repo. This theme substitutes the open, similarly-proportioned
 * IBM Plex Mono (SIL Open Font License 1.1), with system monospace fallbacks.
 * Anyone with a BerkeleyMono license can override --font-body / --font-heading
 * locally to get the exact match.
 *
 * NOT YET CLONABLE: the site's nav is literal bracketed text
 * ("[ LOG IN / SIGN UP ]") rendered as page content, not a navbar
 * component — that's copy, not styling, and out of scope for a theme.
 * The decorative circle/diagram illustrations are likewise page content.
 * This theme clones the *typographic system* (monospace-everything,
 * literal "#"/"##" markdown markers before headings, tight uniform type
 * scale, near-monochrome palette) rather than the homepage's bespoke layout.
 */

/* =======================
    IMPORTS
========================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

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

:root {
  color-scheme: light dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root {
  --font-heading: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-base: 0.8125rem; /* ~13px, close to code.storage's 12px body */

  --radius: 0; /* the reference site has no rounded corners anywhere */
  --navbar-height: 3.5rem;
}

:root,
:root[data-theme="light"] {
  /* re-measured 2026-08-09 against a fresh static repro (computed-style +
     screenshot pass) — paler background and lighter foreground than the
     original estimate below */
  --color-l-background: oklch(0.99 0 0);   /* ~#fcfcfc */
  --color-l-foreground: oklch(0.15 0 0);   /* ~#262626 */
  --color-l-accent: oklch(0.15 0 0); /* near-monochrome; accent = foreground, no color pop */

  --color-background: var(--color-l-background);
  --color-foreground: var(--color-l-foreground);
  --color-accent: var(--color-l-accent);
}

:root[data-theme="dark"] {
  --color-d-background: #0a0a0a;
  --color-d-foreground: #e5e5e3;
  --color-d-accent: #e5e5e3;

  --color-background: var(--color-d-background);
  --color-foreground: var(--color-d-foreground);
  --color-accent: var(--color-d-accent);
}

/* =======================
    TYPOGRAPHY
    reference site: uniform 12px body, 2x line-height, no weight jump for
    h1/h2 (bold instead of size-scaled), everything monospace including body
========================== */

.rendered-mdx {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6; /* re-measured 2026-08-09; was 2, reference is tighter */
  letter-spacing: 0;
}

/* @tailwindcss/typography sets its own explicit font-size on these
   elements (e.g. p at 1.125rem/18px) — an explicit rule on the element
   itself, which wins over the inherited size from .rendered-mdx above.
   Setting font-size on a parent does not override a child's own explicit
   rule. Found 2026-08-09 after the deployed demo measured 18px body text
   instead of the intended 13px.
   !important is deliberate, not sloppy: Tailwind's selector
   (`.prose :where(p):not(:where([class~="not-prose"] *))`) resolves to
   the same specificity as `.rendered-mdx p` once :where()'s zero-spec
   rule is applied throughout, so this is a tie the cascade layer order
   decides, not specificity — same underlying issue as the inline-code
   backtick gotcha in the authoring tutorial, where docs/theming.md's
   claim that themes never need !important already didn't hold.
   :not(.is-plain) throughout this block, matching Flowershow's own
   default-theme.css convention (`.rendered-mdx:not(.is-plain) { @apply
   prose ... }`): a `layout: plain` page (used for hand-built Tailwind
   landing pages — see docs/theme-authoring-tutorial.md) gets no prose
   styling from Flowershow either, and shouldn't have these !important
   rules fight custom sizing in bespoke landing markup. */
.rendered-mdx:not(.is-plain) :where(p, li, blockquote, dl, dt, dd) {
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
}

.rendered-mdx:not(.is-plain) table,
.rendered-mdx:not(.is-plain) th,
.rendered-mdx:not(.is-plain) td {
  font-size: 0.875rem !important; /* 14px, matches the reference's pricing-table size */
}

.rendered-mdx:not(.is-plain) pre {
  font-size: 0.875rem !important; /* 14px, matches the reference's code-block size */
  line-height: 1.5 !important;
}

.rendered-mdx:not(.is-plain) h1,
.rendered-mdx:not(.is-plain) h2,
.rendered-mdx:not(.is-plain) h3,
.rendered-mdx:not(.is-plain) h4,
.rendered-mdx:not(.is-plain) h5,
.rendered-mdx:not(.is-plain) h6,
.page-header-title {
  font-family: var(--font-heading);
  font-weight: 600; /* re-measured 2026-08-09; was 700 (bold), reference is semibold */
  font-size: var(--font-size-base);
  text-transform: none;
  letter-spacing: 0;
}

/* re-measured 2026-08-09: reference steps h1/h2 slightly rather than holding
   every level at the body size. .page-header-title is the page-title banner
   Flowershow renders above markdown content (e.g. a site's index page) —
   added 2026-08-09, it was previously unstyled here and fell back to the
   default theme's 48px heading, breaking the whole tight monospace scale on
   any page that uses it. */
.rendered-mdx:not(.is-plain) h1,
.page-header-title { font-size: 1.0625rem; } /* ~17px */
.rendered-mdx:not(.is-plain) h2 { font-size: 1rem; }      /* ~16px */

/* literal markdown heading markers, mimicking the reference site's raw "#" */
.rendered-mdx:not(.is-plain) h1::before,
.page-header-title::before { content: "# "; color: var(--color-foreground-400); }
.rendered-mdx:not(.is-plain) h2::before { content: "## "; color: var(--color-foreground-400); }
.rendered-mdx:not(.is-plain) h3::before { content: "### "; color: var(--color-foreground-400); }

/* same component family as .page-header-title above */
.page-header-description {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-foreground-400);
}

/* re-measured 2026-08-09: reference underlines on hover only (border-bottom
   on transparent), not permanently underlined */
.rendered-mdx:not(.is-plain) a {
  color: var(--color-foreground);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.rendered-mdx:not(.is-plain) a:hover {
  border-bottom-color: var(--color-foreground);
}

code,
pre,
kbd {
  font-family: var(--font-body);
}

/* =======================
    NAVBAR
    reference site has no navbar chrome; approximate with bracketed links
    on a bare, borderless bar
========================== */

.site-navbar {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-foreground-100);
  box-shadow: none;
}

.site-navbar-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.site-navbar-link::before { content: "[ "; }
.site-navbar-link::after { content: " ]"; }

.site-navbar-site-name,
.site-navbar-site-title {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
}

/* =======================
    SIDEBAR TREE
========================== */

.site-sidebar {
  border-right: 1px solid var(--color-foreground-100);
}

.site-tree-item-self {
  font-size: 0.8125rem;
  border-radius: 0;
}

.site-tree-item-self.is-current {
  font-weight: 700;
}

/* =======================
    CODE BLOCKS
========================== */

.pre-container {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  border: 1px solid var(--color-foreground-100);
  border-radius: 0;
}

/* =======================
    CALLOUTS
    monochrome: type indicated by bracketed label, not color
========================== */

.callout {
  border: 1px solid var(--color-foreground-200);
  border-left-width: 3px;
  border-radius: 0;
  background-color: transparent;
}

.callout-title {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  background-color: transparent;
}

/* =======================
    LIST COMPONENT
========================== */

.list-component-item {
  border: 1px solid var(--color-foreground-100);
  border-radius: 0;
}

.list-component-item-headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--font-size-base);
}

.list-component-item-eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-foreground-400);
}

/* =======================
    SEARCH MODAL
========================== */

.search-modal-input {
  font-family: var(--font-body);
}