/* The app's own CSS: libre-publish's small library of components and layout
   pieces, served as written (no build), plus a stylesheet per area of this
   app. docs/frontend.md has the vocabulary; each file says what it draws.

   The layers, in the order they win: the reset, element defaults, the
   components, and last the few helpers (helpers.css) that adjust one. */
@layer reset, base, components, ui, helpers;

/* Tokens are unlayered, so /branding.css (Branding#stylesheet) and the dark
   theme below win over these.

   Every screen is drawn from Settings › Branding's color, type and surface,
   through these tokens and nothing else:

   - Color. gray is the neutral (--surface canvas, gray-50 sidebar and wells,
     gray-200 hairlines, gray-500 secondary text, gray-900 text), every step
     mixed from --neutral-tint: the branding's secondary color tints the
     grays with its hue, at fixed lightness. accent is the brand's primary
     color (primary buttons, links, focus, selection, what's current), from
     --brand-*, which Branding sets; the classic blue until it does. red,
     green and yellow are for status. The dark theme re-points every family's
     steps, so a rule names one step and reads in both.
   - Type. --font-sans, the branding's font; every component reads it.
   - Surface. --radius-* (3px until the branding's corners set them),
     --shadow-surface (panels) and --shadow-overlay (menus, dialogs, sheets,
     toasts), which its shadow sets. */
:root {
  --font-sans: "Inter", "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Adwaita Sans", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xs: 0.75rem;
  --leading-xs: 1rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-base: 1rem;
  --leading-base: 1.5rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.75rem;
  --text-xl: 1.25rem;
  --leading-xl: 1.75rem;
  --text-2xl: 1.5rem;
  --leading-2xl: 2rem;
  --text-3xl: 1.875rem;
  --leading-3xl: 2.25rem;

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

  /* The spacing scale, in 4px steps (and the half steps the admin uses). */
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* shadcn's neutral (achromatic) grays until branding sets a secondary
     color, which tints them with its hue (capped, so text stays text). */
  --neutral-tint: oklch(50% 0 0);
  --surface: #fff;
  /* The frame's dark (the admin bar and menu, in either appearance): their
     --gray-50 below, named so the page's own rules can reach it. */
  --chrome: oklch(from var(--neutral-tint) 19.5% min(calc(c * 0.25), 0.03) h);
  --gray-50: oklch(from var(--neutral-tint) 96.5% min(calc(c * 0.04), 0.004) h);
  --gray-100: oklch(from var(--neutral-tint) 94% min(calc(c * 0.06), 0.006) h);
  --gray-200: oklch(from var(--neutral-tint) 91% min(calc(c * 0.08), 0.008) h);
  --gray-300: oklch(from var(--neutral-tint) 84% min(calc(c * 0.1), 0.01) h);
  --gray-400: oklch(from var(--neutral-tint) 70% min(calc(c * 0.16), 0.016) h);
  --gray-500: oklch(from var(--neutral-tint) 56% min(calc(c * 0.28), 0.028) h);
  --gray-600: oklch(from var(--neutral-tint) 48% min(calc(c * 0.4), 0.04) h);
  --gray-700: oklch(from var(--neutral-tint) 40% min(calc(c * 0.52), 0.05) h);
  --gray-800: oklch(from var(--neutral-tint) 33% min(calc(c * 0.7), 0.06) h);
  --gray-900: oklch(from var(--neutral-tint) 26% min(calc(c * 1), 0.07) h);

  /* The brand's primary color in steps, shadcn's neutral until branding sets
     one (Branding#stylesheet). Fixed: the accent below reads them per theme. */
  --brand-50: oklch(0.985 0 0);
  --brand-100: oklch(0.97 0 0);
  --brand-200: oklch(0.922 0 0);
  --brand-300: oklch(0.87 0 0);
  --brand-400: oklch(0.708 0 0);
  --brand-500: oklch(0.556 0 0);
  --brand-600: oklch(0.205 0 0);
  --brand-700: oklch(0.371 0 0);
  --brand-800: oklch(0.269 0 0);
  --brand-900: oklch(0.145 0 0);
  /* Words on an accent fill. */
  --on-accent: #fff;

  --accent-50: var(--brand-50);
  --accent-100: var(--brand-100);
  --accent-200: var(--brand-200);
  --accent-300: var(--brand-300);
  --accent-400: var(--brand-400);
  --accent-500: var(--brand-500);
  --accent-600: var(--brand-600);
  --accent-700: var(--brand-700);
  --accent-800: var(--brand-800);
  --accent-900: var(--brand-900);

  --red-50: oklch(97.1% 0.013 17.38);
  --red-100: oklch(93.6% 0.032 17.717);
  --red-200: oklch(88.5% 0.062 18.334);
  --red-300: oklch(80.8% 0.114 19.571);
  --red-400: oklch(70.4% 0.191 22.216);
  --red-500: oklch(63.7% 0.237 25.331);
  --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518);
  --red-800: oklch(44.4% 0.177 26.899);
  --red-900: oklch(39.6% 0.141 25.723);
  --green-50: oklch(98.2% 0.018 155.826);
  --green-100: oklch(96.2% 0.044 156.743);
  --green-200: oklch(92.5% 0.084 155.995);
  --green-300: oklch(87.1% 0.15 154.449);
  --green-400: oklch(79.2% 0.209 151.711);
  --green-500: oklch(72.3% 0.219 149.579);
  --green-600: oklch(62.7% 0.194 149.214);
  --green-700: oklch(52.7% 0.154 150.069);
  --green-800: oklch(44.8% 0.119 151.328);
  --green-900: oklch(39.3% 0.095 152.535);
  --yellow-50: oklch(98.7% 0.026 102.212);
  --yellow-100: oklch(97.3% 0.071 103.193);
  --yellow-200: oklch(94.5% 0.129 101.54);
  --yellow-300: oklch(90.5% 0.182 98.111);
  --yellow-400: oklch(85.2% 0.199 91.936);
  --yellow-500: oklch(79.5% 0.184 86.047);
  --yellow-600: oklch(68.1% 0.162 75.834);
  --yellow-700: oklch(55.4% 0.135 66.442);
  --yellow-800: oklch(47.6% 0.114 61.907);
  --yellow-900: oklch(42.1% 0.095 57.708);

  /* Fizzy's corners, 3px, until branding sets its own. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --radius-xl: 3px;
  --radius-2xl: 4px;
  --radius-full: 9999px;

  --page-dark: oklch(from var(--neutral-tint) 19.5% min(calc(c * 0.25), 0.03) h);
  --surface-dark: oklch(from var(--neutral-tint) 16% min(calc(c * 0.25), 0.03) h);

  /* Flat panels and a soft lift for what floats, until branding sets a
     shadow. */
  --shadow-surface: 0 0 #0000;
  --shadow-overlay: 0 0 0 1px oklch(0% 0 0 / 4%), 0 2px 4px oklch(0% 0 0 / 4%), 0 12px 32px -8px oklch(0% 0 0 / 12%);

  --focus-ring: 2px solid var(--accent-500);

  /* Z-index */
  --z-popup: 10;
  --z-nav: 20;
  --z-flash: 30;
  --z-tooltip: 40;
  --z-bar: 50;
  --z-nav-open: 100;
}

/* Light chosen by the theme toggle: the browser's own controls (checkboxes,
   radios, scrollbars, date pickers) draw light too, whatever the system's
   setting, since the page says it supports both (<meta name="color-scheme">). */
html[data-theme="light"] {
  color-scheme: light;
}

/* Dark: surfaces go dark and the steps turn over, so gray-900 text is light,
   gray-50 lifts the sidebar off the canvas, and an accent fill lightens with
   dark words on it. Grays stay mixed from --neutral-tint and the accent from
   --brand-*, so both follow branding. Chosen by the toggle (data-theme) or,
   without a choice, by the system. The sidebar follows it like everything
   else (ui/app-shell.css). */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface: var(--surface-dark);
  --gray-50: oklch(from var(--neutral-tint) 19.5% min(calc(c * 0.25), 0.03) h);
  --gray-100: oklch(from var(--neutral-tint) 23.5% min(calc(c * 0.25), 0.03) h);
  --gray-200: oklch(from var(--neutral-tint) 28.5% min(calc(c * 0.25), 0.03) h);
  --gray-300: oklch(from var(--neutral-tint) 36% min(calc(c * 0.25), 0.03) h);
  --gray-400: oklch(from var(--neutral-tint) 46% min(calc(c * 0.25), 0.03) h);
  --gray-500: oklch(from var(--neutral-tint) 63% min(calc(c * 0.25), 0.03) h);
  --gray-600: oklch(from var(--neutral-tint) 73% min(calc(c * 0.25), 0.03) h);
  --gray-700: oklch(from var(--neutral-tint) 83% min(calc(c * 0.25), 0.03) h);
  --gray-800: oklch(from var(--neutral-tint) 91% min(calc(c * 0.25), 0.03) h);
  --gray-900: oklch(from var(--neutral-tint) 97% min(calc(c * 0.25), 0.03) h);
  --red-50: color-mix(in oklch, oklch(39.6% 0.141 25.723) 45%, var(--surface-dark));
  --red-100: color-mix(in oklch, oklch(39.6% 0.141 25.723) 70%, var(--surface-dark));
  --red-200: oklch(44.4% 0.177 26.899);
  --red-300: oklch(50.5% 0.213 27.518);
  --red-400: oklch(63.7% 0.237 25.331);
  --red-500: oklch(70.4% 0.191 22.216);
  --red-600: oklch(70.4% 0.191 22.216);
  --red-700: oklch(80.8% 0.114 19.571);
  --red-800: oklch(88.5% 0.062 18.334);
  --red-900: oklch(93.6% 0.032 17.717);
  --green-50: color-mix(in oklch, oklch(39.3% 0.095 152.535) 45%, var(--surface-dark));
  --green-100: color-mix(in oklch, oklch(39.3% 0.095 152.535) 70%, var(--surface-dark));
  --green-200: oklch(44.8% 0.119 151.328);
  --green-300: oklch(52.7% 0.154 150.069);
  --green-400: oklch(72.3% 0.219 149.579);
  --green-500: oklch(79.2% 0.209 151.711);
  --green-600: oklch(79.2% 0.209 151.711);
  --green-700: oklch(87.1% 0.15 154.449);
  --green-800: oklch(92.5% 0.084 155.995);
  --green-900: oklch(96.2% 0.044 156.743);
  --yellow-50: color-mix(in oklch, oklch(42.1% 0.095 57.708) 45%, var(--surface-dark));
  --yellow-100: color-mix(in oklch, oklch(42.1% 0.095 57.708) 70%, var(--surface-dark));
  --yellow-200: oklch(47.6% 0.114 61.907);
  --yellow-300: oklch(55.4% 0.135 66.442);
  --yellow-400: oklch(79.5% 0.184 86.047);
  --yellow-500: oklch(85.2% 0.199 91.936);
  --yellow-600: oklch(85.2% 0.199 91.936);
  --yellow-700: oklch(90.5% 0.182 98.111);
  --yellow-800: oklch(94.5% 0.129 101.54);
  --yellow-900: oklch(97.3% 0.071 103.193);
  --accent-50: color-mix(in oklch, var(--brand-400) 14%, var(--surface-dark));
  --accent-100: color-mix(in oklch, var(--brand-400) 22%, var(--surface-dark));
  --accent-200: color-mix(in oklch, var(--brand-400) 36%, var(--surface-dark));
  --accent-300: color-mix(in oklch, var(--brand-400) 55%, var(--surface-dark));
  --accent-400: color-mix(in oklch, var(--brand-400) 78%, var(--surface-dark));
  --accent-500: var(--brand-400);
  --accent-600: color-mix(in oklch, var(--brand-300) 75%, white);
  --accent-700: color-mix(in oklch, var(--brand-200) 75%, white);
  --accent-800: var(--brand-100);
  --accent-900: var(--brand-50);
  --on-accent: var(--surface-dark);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --surface: var(--surface-dark);
    --gray-50: oklch(from var(--neutral-tint) 19.5% min(calc(c * 0.25), 0.03) h);
    --gray-100: oklch(from var(--neutral-tint) 23.5% min(calc(c * 0.25), 0.03) h);
    --gray-200: oklch(from var(--neutral-tint) 28.5% min(calc(c * 0.25), 0.03) h);
    --gray-300: oklch(from var(--neutral-tint) 36% min(calc(c * 0.25), 0.03) h);
    --gray-400: oklch(from var(--neutral-tint) 46% min(calc(c * 0.25), 0.03) h);
    --gray-500: oklch(from var(--neutral-tint) 63% min(calc(c * 0.25), 0.03) h);
    --gray-600: oklch(from var(--neutral-tint) 73% min(calc(c * 0.25), 0.03) h);
    --gray-700: oklch(from var(--neutral-tint) 83% min(calc(c * 0.25), 0.03) h);
    --gray-800: oklch(from var(--neutral-tint) 91% min(calc(c * 0.25), 0.03) h);
    --gray-900: oklch(from var(--neutral-tint) 97% min(calc(c * 0.25), 0.03) h);
    --red-50: color-mix(in oklch, oklch(39.6% 0.141 25.723) 45%, var(--surface-dark));
    --red-100: color-mix(in oklch, oklch(39.6% 0.141 25.723) 70%, var(--surface-dark));
    --red-200: oklch(44.4% 0.177 26.899);
    --red-300: oklch(50.5% 0.213 27.518);
    --red-400: oklch(63.7% 0.237 25.331);
    --red-500: oklch(70.4% 0.191 22.216);
    --red-600: oklch(70.4% 0.191 22.216);
    --red-700: oklch(80.8% 0.114 19.571);
    --red-800: oklch(88.5% 0.062 18.334);
    --red-900: oklch(93.6% 0.032 17.717);
    --green-50: color-mix(in oklch, oklch(39.3% 0.095 152.535) 45%, var(--surface-dark));
    --green-100: color-mix(in oklch, oklch(39.3% 0.095 152.535) 70%, var(--surface-dark));
    --green-200: oklch(44.8% 0.119 151.328);
    --green-300: oklch(52.7% 0.154 150.069);
    --green-400: oklch(72.3% 0.219 149.579);
    --green-500: oklch(79.2% 0.209 151.711);
    --green-600: oklch(79.2% 0.209 151.711);
    --green-700: oklch(87.1% 0.15 154.449);
    --green-800: oklch(92.5% 0.084 155.995);
    --green-900: oklch(96.2% 0.044 156.743);
    --yellow-50: color-mix(in oklch, oklch(42.1% 0.095 57.708) 45%, var(--surface-dark));
    --yellow-100: color-mix(in oklch, oklch(42.1% 0.095 57.708) 70%, var(--surface-dark));
    --yellow-200: oklch(47.6% 0.114 61.907);
    --yellow-300: oklch(55.4% 0.135 66.442);
    --yellow-400: oklch(79.5% 0.184 86.047);
    --yellow-500: oklch(85.2% 0.199 91.936);
    --yellow-600: oklch(85.2% 0.199 91.936);
    --yellow-700: oklch(90.5% 0.182 98.111);
    --yellow-800: oklch(94.5% 0.129 101.54);
    --yellow-900: oklch(97.3% 0.071 103.193);
    --accent-50: color-mix(in oklch, var(--brand-400) 14%, var(--surface-dark));
    --accent-100: color-mix(in oklch, var(--brand-400) 22%, var(--surface-dark));
    --accent-200: color-mix(in oklch, var(--brand-400) 36%, var(--surface-dark));
    --accent-300: color-mix(in oklch, var(--brand-400) 55%, var(--surface-dark));
    --accent-400: color-mix(in oklch, var(--brand-400) 78%, var(--surface-dark));
    --accent-500: var(--brand-400);
    --accent-600: color-mix(in oklch, var(--brand-300) 75%, white);
    --accent-700: color-mix(in oklch, var(--brand-200) 75%, white);
    --accent-800: var(--brand-100);
    --accent-900: var(--brand-50);
    --on-accent: var(--surface-dark);
  }
}