/* this_file: src/editorial/fontlab-theme.css */

:root {
  /* FontLab owns editorial identity and geometry. daisyUI owns the complete
     color contract through the official data-theme selected at runtime. */
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;

  /* Seven public font roles. Every identity below declares their relationship
     explicitly; consumers never infer one role from a different token. */
  --fl-font-post: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "REM", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;

  /* MaterialX consumes the active daisyUI graph; it never owns another
     semantic palette. The post-theme compatibility sheet applies these pairs
     to unlayered MaterialX components. */
  --fl-semantic-info: var(--color-info);
  --fl-semantic-info-content: var(--color-info-content);
  --fl-semantic-success: var(--color-success);
  --fl-semantic-success-content: var(--color-success-content);
  --fl-semantic-warning: var(--color-warning);
  --fl-semantic-warning-content: var(--color-warning-content);
  --fl-semantic-error: var(--color-error);
  --fl-semantic-error-content: var(--color-error-content);
  --fl-semantic-example: var(--color-base-200);
  --fl-semantic-example-content: var(--color-base-content);
  --fl-semantic-quote: var(--color-neutral);
  --fl-semantic-quote-content: var(--color-neutral-content);

  --md-admonition-color--note: var(--color-info);
  --md-admonition-color--abstract: var(--color-info);
  --md-admonition-color--info: var(--color-info);
  --md-admonition-color--tip: var(--color-success);
  --md-admonition-color--success: var(--color-success);
  --md-admonition-color--question: var(--color-success);
  --md-admonition-color--warning: var(--color-warning);
  --md-admonition-color--failure: var(--color-error);
  --md-admonition-color--danger: var(--color-error);
  --md-admonition-color--bug: var(--color-error);
  --md-admonition-color--example: var(--color-secondary);
  --md-admonition-color--quote: var(--color-neutral);

  /* Spacing scale (4px base). Explicit px: MaterialX sets html to 137.5%,
     so rem would be ~22px and inflate every gap. */
  --fl-space-1: 4px;
  --fl-space-2: 8px;
  --fl-space-3: 12px;
  --fl-space-4: 16px;
  --fl-space-6: 24px;
  --fl-space-8: 32px;
  --fl-space-12: 48px;

  /* A single hairline; whitespace carries structure, not borders. */
  --fl-hairline: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  --fl-focus: 0 0 0 2px color-mix(in oklab, var(--color-primary) 45%, transparent);

  /* Layout geometry. Edge = viewport gutter; measure = text column width. */
  --fl-edge: 24px;
  --fl-measure: 40rem;
  --fl-content-gap: clamp(1.5rem, 5vw, 6rem);
  --fl-header-h: 112px;
  --fl-menu-dark: rgb(42, 42, 42); /* matches the FontLab menu's dark backdrop */

  /* Traditional type: few sizes, pronounced jumps, LIGHT headings (never bold).
     Per-theme overrides can enlarge display sizes. em is relative to the 18px
     content base set in the layout stylesheet. */
  --fl-body-size: 1.06em;
  --fl-line: clamp(1.45em, 1.3em + 0.5vw, 1.62em); /* fluid reading leading (issue 118) */
  --fl-h1: 2.6em;
  --fl-h2: 1.6em;
  --fl-h3: 1.15em;
  --fl-heading-weight: 400;
  --fl-heading-weight-min: 300;
  --fl-quote-style: normal; /* sans themes: upright + accent colour */
  --fl-quote-color: var(--color-base-content);

  /* MaterialX bindings reference the daisyUI tokens above. */
  --md-default-bg-color: var(--color-base-100);
  --md-default-bg-color--light: color-mix(in oklab, var(--color-base-100) 70%, transparent);
  --md-default-bg-color--lighter: color-mix(in oklab, var(--color-base-100) 30%, transparent);
  --md-default-bg-color--lightest: color-mix(in oklab, var(--color-base-100) 12%, transparent);
  --md-default-fg-color: var(--color-base-content);
  --md-default-fg-color--light: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  --md-default-fg-color--lighter: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  --md-default-fg-color--lightest: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  --md-primary-fg-color: var(--color-base-100);
  --md-primary-bg-color: var(--color-base-content);
  --md-accent-fg-color: var(--color-secondary);
  --md-accent-bg-color: var(--color-secondary-content);
  --md-typeset-a-color: var(--color-secondary);
  --md-code-bg-color: var(--color-base-200);
  --md-code-fg-color: var(--color-base-content);
  --md-admonition-bg-color: var(--color-base-100);
  --md-admonition-fg-color: var(--color-base-content);
  --md-text-font: var(--fl-font-body);
  --md-code-font: var(--fl-font-mono);
}

/* FontLab's default identity extends daisyUI Light by changing complete token
   pairs only. Unspecified semantic pairs remain owned by the Light base. */
html[data-fl-subtheme="material-light"] {
  --color-base-100: oklch(99% 0.003 96);
  --color-base-200: oklch(97% 0.005 96);
  --color-base-300: oklch(93% 0.008 96);
  --color-base-content: oklch(24% 0.015 260);
  --color-primary: oklch(48% 0.19 264);
  --color-primary-content: oklch(98% 0.01 264);
  --color-secondary: oklch(31% 0.018 260);
  --color-secondary-content: oklch(98% 0.004 96);
  --color-accent: var(--color-secondary);
  --color-accent-content: var(--color-secondary-content);
  --color-neutral: oklch(35% 0.012 260);
  --color-neutral-content: oklch(97% 0.005 260);
  --fl-font-post: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "REM", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;
}

html[data-fl-subtheme="material-dark"] {
  color-scheme: dark;
  --color-base-100: oklch(19% 0.012 260);
  --color-base-200: oklch(23% 0.014 260);
  --color-base-300: oklch(28% 0.016 260);
  --color-base-content: oklch(93% 0.006 96);
  --color-primary: oklch(78% 0.16 245);
  --color-primary-content: oklch(17% 0.025 245);
  --color-secondary: oklch(84% 0.012 96);
  --color-secondary-content: oklch(18% 0.014 260);
  --color-neutral: oklch(85% 0.008 260);
  --color-neutral-content: oklch(19% 0.012 260);
  --fl-font-post: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "REM", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;
}

/* ---- Font-driven editorial subthemes (Adobe serif + Google sans) ---------- */

/* Miller — newspaper (after vexy.art/lines/case-typography): extreme
   monochrome newsprint, Miller newspaper serifs, ink italics for quotes. */
html[data-fl-subtheme="miller"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0); /* white */
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(91% 0 0);
  --color-base-content: oklch(15% 0 0); /* almost black */
  --color-primary: oklch(18% 0 0); /* ink, not colour */
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: var(--color-primary);
  --color-secondary-content: var(--color-primary-content);
  --color-accent: var(--color-primary);
  --color-accent-content: var(--color-primary-content);
  --color-neutral: oklch(18% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --fl-font-post: "miller-headline", "miller-banner", Georgia, serif;
  --fl-font-head: "miller-headline", "miller-banner", Georgia, serif;
  --fl-font-body: "richmond-text", Georgia, "Times New Roman", serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "REM", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;
  --fl-quote-style: italic; /* serif theme: quotes are italic, same size */
  --fl-quote-color: inherit;
}

/* Retro — warm, oversized display (merges the former Gelica + New Spirit into
   one warm retro look). Cream ground, rust accent, big light headings. */
html[data-fl-subtheme="retro"] {
  color-scheme: light;
  --color-primary: oklch(42% 0.14 41);
  --color-primary-content: oklch(96% 0.059 95.617);
  --color-accent: var(--color-primary);
  --color-accent-content: var(--color-primary-content);
  --color-info: oklch(58% 0.158 241.966);
  --color-info-content: color-mix(in oklab, var(--color-base-content) 40%, black);
  --color-warning: oklch(64% 0.222 41.116);
  --color-warning-content: color-mix(in oklab, var(--color-base-content) 40%, black);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: color-mix(in oklab, var(--color-base-content) 40%, black);
  --fl-font-post: "new-spirit", "gelica", Georgia, serif;
  --fl-font-head: "new-spirit", "gelica", Georgia, serif;
  --fl-font-body: "Work Sans", system-ui, sans-serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "Work Sans", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;
  --fl-h1: 3.4em; /* oversized */
  --fl-h2: 2em;
  --fl-heading-weight: 300;
  --fl-heading-weight-min: 300;
}

/* Lines — vivid Vexy Lines (after vexy.art/lines): a LIGHT theme with vivid
   magenta/violet, Funnel Display headings and REM body (issue 117). */
html[data-fl-subtheme="lines"] {
  color-scheme: light;
  --color-base-100: oklch(98.5% 0.008 320);
  --color-base-200: oklch(95.5% 0.016 320);
  --color-base-300: oklch(90% 0.03 320);
  --color-base-content: oklch(20% 0.03 320);
  --color-primary: oklch(56% 0.27 328); /* vivid magenta */
  --color-primary-content: oklch(99% 0.01 328);
  --color-secondary: oklch(56% 0.22 292); /* violet */
  --color-secondary-content: oklch(99% 0.01 292);
  --color-accent: oklch(64% 0.17 200); /* cyan */
  --color-accent-content: oklch(20% 0.04 200);
  --color-neutral: oklch(28% 0.04 320);
  --color-neutral-content: oklch(98% 0.008 320);
  --fl-font-post: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --fl-font-head: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --fl-font-body: "REM", system-ui, sans-serif;
  --fl-font-smcp: "Outfit", system-ui, sans-serif;
  --fl-font-capt: "REM", system-ui, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fl-font-navi: "REM", system-ui, sans-serif;
}

html[data-fl-subtheme] {
  --md-text-font: var(--fl-font-body);
}

/* ---- Page shell ----------------------------------------------------------- */

/* Fluid root type (issue 118): replaces MaterialX's fixed 137.5%. All content
   sizes are em/rem off this, so the whole reading scale breathes with the
   viewport; px spacing tokens stay constant so rhythm holds. */
html {
  font-size: clamp(15px, 0.42vw + 13.7px, 19px);
}

body {
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-family: var(--fl-font-body);
  letter-spacing: calc(1px - 0.09em);
  text-wrap: pretty;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Global FontLab chrome replaces the MaterialX header + footer. */
.md-header {
  display: none;
}

.md-footer {
  display: none !important;
}