/* Design tokens: the one place that decides how the public site looks. Every other public stylesheet only uses them; none holds a colour,
   font size, space, radius, weight, size, width, border width, z-index or opacity of its own (the few one-off values
   left, such as keyframe timings, are listed in docs/DECISIONS.md). To restyle the site, change a value here.

   Naming: --color-*, --gradient-*, --shadow-*, --font-*, --text-* (size), --weight-*, --leading-*, --space-*,
   --radius-*, --border-width*, --size-*, --width-*, --z-*, --opacity-*, --focus-ring-*, --duration-*, --ease-*, --container-*,
   --grid-*.

   Colours come in light and dark. Dark applies with `data-theme="dark"` (the header toggle, saved by theme.js), or with
   the system setting when the reader has not chosen. Plain CSS can't share one block between the two, so the dark
   values are written twice, below: keep both blocks identical. (`light-dark()` would need only one, but it needs
   Safari 17.5.) The /admin pages load this file too: `admin.css` maps its colour names onto these.

   Breakpoints can't be variables. The site uses mobile-first `min-width` queries at 30rem (small phones),
   40rem, 48rem (tablet) and 64rem (desktop). */

:root {
  /* Colour: text. Every text colour (these three, and accent, danger and success) has at least 4.5:1 contrast (WCAG
     AA) against every background below, in both themes; keep it so when changing one. */
  --color-text: #1c1c1e;
  --color-text-muted: #4f4f5b;
  --color-text-faint: #61616a;
  /* Placeholder text (an empty field, an empty results box): lighter on purpose, the owner's choice; 3:1 or more on
     the surface, not the 4.5:1 of the text colours above. */
  --color-text-placeholder: #9592a0;

  /* Colour: page and surfaces. The page is a vertical gradient through three stops, kept close to flat: a hint of the
     pastel, not a wash of colour. */
  --color-bg: #f8f6f9;
  --color-bg-top: #faf6f8;
  --color-bg-mid: #f6f5fa;
  --color-bg-bottom: #f1f3fb;
  --color-surface: #ffffff;
  /* Borders: --color-border is a soft hairline for dividers that only decorate (rows, sections). Anything that
     outlines a control (inputs, selects, textareas, the default button, keys) uses --color-border-control, which has
     at least 3:1 against every background here in both themes (WCAG 1.4.11). */
  --color-border: #e6e3ec;
  --color-border-control: #85808f;
  --color-panel-start: #eeeafb;
  --color-panel-end: #f8eef2;

  /* Colour: brand and feedback */
  --color-accent: #5d4fc7;
  --color-on-accent: #ffffff;
  /* Feedback: a vivid rose and a cool teal that sit beside the purple (wrong / delete, right / done). The text
     colours pass 4.5:1 on every background; the solids carry --color-on-solid at 4.5:1 or more. */
  --color-danger: #c81e5a; /* text and icons on a surface */
  --color-danger-solid: #e11d74; /* a filled danger button or toast; its text is --color-on-solid */
  --color-success: #0a7663;
  --color-success-solid: #0b7f73; /* a filled "right" button; its text is --color-on-solid */
  /* The decks' answers (the owner's colours, the same in both themes): bright, so they colour fills, icons, borders
     and stars, never text on a light surface (2.2:1 and 2.7:1 on white); text on them is --color-on-bright. */
  --color-right: #23c4a6;
  --color-wrong: #ff707f;
  --color-on-bright: #15131d; /* text on --color-right and --color-wrong: 7:1 or more */
  /* The toast (the owner's colours, the same in both themes): a green fading into mint, --gradient-toast below, with
     --color-on-solid text (the owner's choice: about 1.8:1 at the green end). A failed toast is --color-danger-solid. */
  --color-toast-start: #72db5f;
  --color-toast-end: color-mix(in srgb, #86e5c1 75%, #aecfd4);
  /* The footer's Discord card: a gradient from a soft blue (the owner's choice) to a deep mix of the accent; in dark
     it runs from deep indigo to purple. Text is white in both themes; the button is white with ink text; the mark is
     the circle behind the Discord icon. */
  --color-discord-start: #acc0fd;
  --color-discord-end: color-mix(in srgb, var(--color-accent) 75%, var(--color-text));
  --color-on-discord: #ffffff;
  --color-discord-button: #ffffff;
  --color-discord-ink: var(--color-accent);
  --color-discord-mark: rgb(255 255 255 / 0.18);
  --color-record: #e11d74;
  --color-record-glow: #ff8fc0;
  --color-sparkle: #f2b33d; /* the little stars around the developers' links: decoration only */
  --color-on-solid: #ffffff; /* text on --color-danger-solid, --color-success-solid and --color-record */
  --color-overlay: rgb(0 0 0 / 0.4); /* behind a modal dialog */

  /* Shadows */
  --shadow-sm: 0 1px 3px rgb(60 40 120 / 0.08), 0 4px 14px rgb(60 40 120 / 0.06);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);

  color-scheme: light;
}

/* Dark: the system setting, unless the reader chose light. Keep identical to the block below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-text: #ececf1;
    --color-text-muted: #aeacbe;
    --color-text-faint: #9897a5;
    --color-text-placeholder: #747285;
    --color-bg: #16151c;
    --color-bg-top: #19171f;
    --color-bg-mid: #17161d;
    --color-bg-bottom: #15161e;
    --color-surface: #23202e;
    --color-border: #353145;
    --color-border-control: #75708a;
    --color-panel-start: #272236;
    --color-panel-end: #2b2229;
    --color-accent: #a194ff;
    --color-on-accent: #15131d;
    --color-discord-start: #2a2550;
    --color-discord-end: #4a3fb0;
    --color-discord-ink: #4a3fb0;
    --color-danger: #ff6fa3;
    --color-success: #3fe0b5;
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
}

/* Dark: chosen with the header toggle. Keep identical to the block above. */
:root[data-theme='dark'] {
  --color-text: #ececf1;
  --color-text-muted: #aeacbe;
  --color-text-faint: #9897a5;
  --color-text-placeholder: #747285;
  --color-bg: #16151c;
  --color-bg-top: #19171f;
  --color-bg-mid: #17161d;
  --color-bg-bottom: #15161e;
  --color-surface: #23202e;
  --color-border: #353145;
  --color-border-control: #75708a;
  --color-panel-start: #272236;
  --color-panel-end: #2b2229;
  --color-accent: #a194ff;
  --color-on-accent: #15131d;
  --color-discord-start: #2a2550;
  --color-discord-end: #4a3fb0;
  --color-discord-ink: #4a3fb0;
  --color-danger: #ff6fa3;
  --color-success: #3fe0b5;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
  color-scheme: dark;
}

/* Everything below is the same in both themes. The gradients are built from the stops above, so they follow the theme
   without being repeated in the dark blocks. */
:root {
  --gradient-page: linear-gradient(
    180deg,
    var(--color-bg-top) 0%,
    var(--color-bg-mid) 55%,
    var(--color-bg-bottom) 100%
  );
  --gradient-toast: linear-gradient(135deg, var(--color-toast-start), var(--color-toast-end));
  --gradient-panel: linear-gradient(
    180deg,
    var(--color-panel-start) 0%,
    var(--color-panel-end) 100%
  );

  /* Fonts: Noto Sans Georgian for everything, Georgian and English, text and headings (self-hosted,
     `@font-face` in typography.css; it has Latin and every Mingrelian letter: ჸ, ჷ, ჲ). The system fonts after it show until it loads. */
  --font-text: 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', 'BPG Arial', sans-serif;
  --font-title: var(--font-text);

  /* Type scale: a major second (×1.125) on a 16px body: each step is the one below × 1.125 (xs and sm two and one
     steps under the body, md half a step under; display skips a step). Sizes in rem, so the reader's browser text size
     still applies. Then weights and line heights. */
  --text-xs: 0.79rem;
  --text-sm: 0.889rem;
  --text-md: 0.943rem;
  --text-base: 1rem; /* the page's body text; 16px also keeps iOS from zooming into a field */
  --text-lg: 1.125rem;
  --text-xl: 1.266rem;
  --text-2xl: 1.424rem;
  --text-3xl: 1.602rem;
  --text-display: 2.027rem;
  /* Headings grow with the window instead of jumping at a breakpoint: from the smaller step at a 20rem (320px) window
     to the larger one at 64rem (1024px), and no further. Each is a clamp() between two steps above; the middle term
     is worked out from them (CSS can't divide a length by a length), so recompute it when a step changes. */
  --text-h1: clamp(1.424rem, 1.343rem + 0.405vw, 1.602rem); /* 2xl → 3xl */
  --text-h2: clamp(1.125rem, 1.061rem + 0.32vw, 1.266rem); /* lg → xl */
  --text-title: clamp(1.602rem, 1.409rem + 0.966vw, 2.027rem); /* 3xl → display: .page-title */
  /* The dashboard's big numbers: the scale's next steps above display (2.566 → 3.247rem), growing with the window. */
  --text-stat: clamp(2.566rem, 2.257rem + 1.548vw, 3.247rem);
  --text-headword: var(--text-stat); /* the word page's headword: the biggest text on the site */
  --text-smaller: 0.9em; /* relative: a little smaller than the text around it */

  --weight-light: 300; /* placeholders */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.25;
  --leading-snug: 1.45;
  --leading-normal: 1.6;

  /* Space: margins, padding and gaps. 1 = 0.25rem, so 4 = 1rem. */
  --space-half: 0.125rem;
  --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;
  --space-20: 5rem;

  /* Corners */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px; /* cards, dialogs, inputs */
  --radius-xl: 14px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Borders: hairlines everywhere; the strong one for tab underlines, key bottoms and the review deck's buttons. */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Sizes of fixed-size things: square controls (icon buttons, keys, the deck's round buttons; also the minimum
     height of small toggles), and a few one-purpose sizes. */
  --size-control-xs: 1.75rem; /* the icon buttons in a result row */
  --size-control-sm: 2rem;
  --size-control-md: 2.4rem; /* keyboard keys, the letter navigation */
  --size-control-lg: 3rem;
  --size-control-xl: 4.25rem;
  --size-record: 4.5rem; /* the record button */
  --size-fab: 3.25rem; /* the floating Discord button */
  --size-avatar: 4rem;
  --size-portrait: 7.5rem; /* the developers' photos on the about page */
  --size-pane: 8rem; /* minimum height of the translator's input card and results panel, side by side */
  --size-label: 6rem; /* the language names before a meaning's lookup words, so the words line up */

  /* Widths: the most a block may take (a reading column, a form, a dialog) before it stops growing. */
  --width-search: 40rem;
  --width-reading: 42rem; /* .page-narrow */
  --width-measure: 40rem; /* running text: about 70 Latin characters a line, fewer Georgian ones */
  --width-intro: 64rem;
  --width-form: 36rem;
  --width-deck: 40rem; /* the swipe decks and Speak: the card's width */
  --width-dialog: 36rem;
  --width-dialog-sm: 30rem;
  --width-card: 16rem; /* the narrowest a dashboard card gets before the grid drops a column */

  /* Stacking: what may sit above the page. */
  --z-raised: 5; /* the floating Discord button */
  --z-dropdown: 10; /* search suggestions */
  --z-overlay: 20; /* the search help panel, toasts */
  --z-tooltip: 30; /* the icon buttons' tooltips, over everything */

  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.6; /* a busy button, a skipped row */

  /* Keyboard focus: one ring for everything (base.css), drawn outside the element. */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-accent);
  --focus-ring-offset: 2px;

  /* Motion */
  --duration-fast: 0.1s;
  --duration-base: 0.2s;
  --duration-stagger: 0.04s; /* between items that appear one after another */
  --duration-enter: 0.35s; /* a result row or a meaning coming in */
  --duration-reveal: 0.6s; /* a slow, soft entrance: items fading in as they scroll into view */
  --duration-reveal-step: 0.06s; /* between those items */
  --duration-notice: 10s; /* how long a notice that can be closed (Add a word's thank-you) stays by itself */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* starts quick, settles softly: hovers and lifts */

  /* Layout: the page column is --container-width wide at most, with --grid-margin inside it on both sides (header,
     header search, main). Within it, a column grid: --grid-columns columns with --grid-gutter between them. In
     development, Shift+G (or `?grid`) shows it over the page: public/js/grid-overlay.js. */
  --container-width: 72rem;
  /* The header and footer: the whole window up to a 16-inch MacBook Pro's 1728px, centred on anything wider (their
     background still reaches the edges). */
  --container-wide-width: 108rem;
  --grid-margin: var(--space-4);
  --grid-columns: 4;
  --grid-gutter: var(--space-4);
}

/* Tablet */
@media (min-width: 48rem) {
  :root {
    --grid-columns: 8;
  }
}

/* Desktop */
@media (min-width: 64rem) {
  :root {
    --grid-margin: var(--space-8);
    --grid-columns: 12;
    --grid-gutter: var(--space-6);
  }
}