/* ==============================================
   Cyber-Lenin Color Palette
   Single-source brand colors + theme aliases.
   Publish CSS-only changes with scripts/deploy-assets; retain old release URLs.
   ============================================== */

:root {
  /* Raw palette, sampled from the Cyber-Lenin portrait. */
  --clr-black: #010409;
  --clr-ink: #0b0d0a;
  --clr-dark: #161b22;
  --clr-dark-raised: #21262d;
  --clr-cream: #f8edca;
  --clr-cream-light: #faf2da;
  --clr-white: #faf2da;
  --clr-muted: #b0b8c1;
  --clr-red: #cf222e;
  --clr-red-deep: #2d1115;
  --clr-accent: #214d2e;

  /* Additional CommuLingo political-position colour families. */
  --commu-position-liberal: #365f87;
  --commu-position-conservative: #455a64;
  --commu-position-monarchist: #755393;
  --commu-position-agrarian: #637236;
  --commu-position-nationalist: #8a6d32;
  --commu-position-revolutionary-socialist: #994757;

  /*
   * Design foundations
   * ------------------
   * Keep non-colour decisions here as well so a visual refresh can be made
   * without hunting through page-level stylesheets. Component styles should
   * consume these semantic tokens instead of introducing one-off values.
   */
  --font-sans: 'IBM Plex Sans', 'Pretendard', 'Pretendard Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Pretendard', 'Pretendard Fallback', sans-serif;
  --weight-heading: 700;
  --weight-emphasis: 800;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-home-title: -0.03em;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.55rem, 4vw, 2rem);
  /* Line-height scale. Pick by role, never a raw number:
     none = icons/badges on one line, tight = headings, snug = labels and
     compact lists, normal = UI text and short notes, relaxed = multi-line
     summaries and panels, prose = long-form reading bodies. */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.45;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;
  --leading-prose: 1.95;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Cyber-Lenin uses a deliberately square visual language. Keep component
     APIs token-based, but make every global corner treatment sharp. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --border-width: 1px;
  --control-height: 2.75rem;
  --control-height-sm: 2rem;

  /* One height for the stacked bars at the top of a page — the logo toolbar and
     the site menu — so the stack reads as one block instead of three sizes.
     Touch raises it to a 44px target; the sticky CommuLingo crumb keeps its own
     lower 34px, since it follows the reader down the whole page. */
  --bar-height: 36px;

  /* Shared spacing and height for section breadcrumbs below the site menu. */
  --crumb-offset: 14px;
  --crumb-height: 34px;

  /* One frame for every page: the toolbar, the site menu and the page
     container share this width, so the logo and the page edges line up as
     the reader moves between sections. */
  --content-frame: 60rem;
  --content-default: var(--content-frame);
  --content-wide: var(--content-frame);
  --content-home: var(--content-frame);
  --content-admin: 70rem;
  --gutter: clamp(0.75rem, 3vw, 1.25rem);
  --content-inset: clamp(var(--space-4), 3vw, var(--space-6));

  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (pointer: coarse) {
  :root {
    --bar-height: 44px;
  }
}

:root,
[data-theme="dark"] {
  /* Dark theme, default. */
  --bg-canvas: var(--clr-black);
  --bg-surface: var(--clr-ink);
  --bg-surface-hover: var(--clr-dark);
  --bg-inset: var(--clr-black);
  --border: var(--clr-cream);
  --border-emphasis: var(--clr-white);
  --text-primary: var(--clr-white);
  --text-secondary: var(--clr-cream);
  --text-muted: var(--clr-muted);
  /* Dark-theme link colour. At 72% accent this resolved to rgb(93,122,90) and
     scored 4.09:1 on the page — under AA, and dimmer than the muted grey
     (9.73:1) sitting right beside it, so on a paginated document the prev/next
     links read as less important than the "3 / 12" label they stand next to.
     48% clears AAA at 7.01:1 while still reading green; hover stays a step
     brighter, as it was. The light theme keeps the flat accent: dark green on
     cream is already 8:1 the other way round. */
  --link: color-mix(in srgb, var(--btn-primary) 48%, var(--clr-cream));
  --link-hover: color-mix(in srgb, var(--btn-primary-hover) 34%, var(--clr-white));
  --accent: var(--clr-accent);
  --accent-green: var(--clr-accent);
  --accent-red: var(--clr-red);
  --btn-bg: var(--clr-dark-raised);
  --btn-hover: var(--clr-dark);
  --btn-primary: var(--clr-accent);
  /* One luminance step up, not a hue change: flat square buttons react by
     ground brightness (the site-wide hover language), never by lifting. */
  --btn-primary-hover: color-mix(in srgb, var(--clr-accent) 85%, var(--clr-cream));
  --btn-danger: var(--clr-red);
  --btn-danger-hover: var(--clr-red);
  --nav-bg: var(--clr-ink);
  --card-bg: var(--clr-ink);
  --input-bg: var(--clr-dark);
  --search-bg: var(--clr-dark-raised);
  --overlay: rgba(1, 4, 9, 0.8);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --code-bg: var(--clr-dark);
  --success-bg: color-mix(in srgb, var(--clr-accent) 28%, var(--clr-black));
  --success-border: var(--clr-accent);
  --success-text: var(--clr-cream);
  --info-bg: color-mix(in srgb, #2f81f7 18%, var(--clr-black));
  --info-border: #58a6ff;
  --info-text: var(--clr-cream);
  --error-bg: var(--clr-red-deep);
  --error-border: var(--clr-red);
  --error-text: var(--clr-cream);
  --focus-ring: color-mix(in srgb, var(--clr-accent) 35%, transparent);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg-canvas: var(--clr-cream-light);
  --bg-surface: var(--clr-cream-light);
  --bg-surface-hover: color-mix(in srgb, var(--clr-accent) 8%, var(--clr-cream-light));
  --bg-inset: color-mix(in srgb, var(--clr-ink) 6%, var(--clr-cream-light));
  --border: var(--clr-ink);
  --border-emphasis: var(--clr-black);
  --text-primary: var(--clr-ink);
  --text-secondary: var(--clr-dark);
  --text-muted: color-mix(in srgb, var(--clr-ink) 68%, var(--clr-cream-light));
  --link: var(--clr-accent);
  --link-hover: var(--clr-accent);
  --accent: var(--clr-accent);
  --accent-green: var(--clr-accent);
  --accent-red: var(--clr-red);
  --btn-bg: color-mix(in srgb, var(--clr-ink) 10%, var(--clr-cream-light));
  --btn-hover: color-mix(in srgb, var(--clr-ink) 16%, var(--clr-cream-light));
  --btn-primary: var(--clr-accent);
  --btn-primary-hover: color-mix(in srgb, var(--clr-accent) 85%, var(--clr-cream));
  --btn-danger: var(--clr-red);
  --btn-danger-hover: var(--clr-red);
  --nav-bg: var(--clr-cream-light);
  --card-bg: var(--clr-cream-light);
  --input-bg: var(--clr-cream-light);
  --search-bg: color-mix(in srgb, var(--clr-red) 16%, var(--clr-cream-light));
  --overlay: rgba(13, 17, 23, 0.55);
  --shadow: 0 1px 3px rgba(13, 17, 23, 0.14);
  --code-bg: color-mix(in srgb, var(--clr-ink) 8%, var(--clr-cream-light));
  --success-bg: color-mix(in srgb, var(--clr-accent) 14%, var(--clr-cream-light));
  --success-border: var(--clr-accent);
  --success-text: var(--clr-ink);
  --info-bg: color-mix(in srgb, #0969da 10%, var(--clr-cream-light));
  --info-border: #0969da;
  --info-text: var(--clr-ink);
  --error-bg: color-mix(in srgb, var(--clr-red) 12%, var(--clr-cream-light));
  --error-border: var(--clr-red);
  --error-text: var(--clr-red);
  --focus-ring: color-mix(in srgb, var(--clr-accent) 32%, transparent);
  color-scheme: light;
}