/* GO BEST SEO design tokens (SaaS pivot spec 10.7). Package P2-C creates this file, P3-D extends it, P7-C (the brand pass) set its colours and type to the decided brand.
 *
 * THE BRAND (decided by the owner on 2026-10-03: docs/design/brand/BRAND.md and brand.tokens.json): forest green and sky blue, Secular One for headings and the wordmark, Assistant for
 * everything else. The values the brand file names are copied here byte for byte, and functions/test/brandPass.test.js fails when one of them drifts:
 *   --bg bg, --surface surface, --ink ink, --ink-faint muted, --border line, --accent-fill brand, --accent and --link brandText, --accent-ink onBrand, --warn warning, --crit critical,
 *   --info and --focus accentText. The pure sky #5BB8EA is a FILL and chart colour only (1.99:1 on the light background), so no text token here carries it.
 * The other colours (the second surface, the strong border, the soft ink, the hover shades, the status tints, the brand panel) are derived from the same two hues; they are the very values of
 * the app's brand layer (public/css/app-shell.css), so a sign-in page and the app look like one product. Brand green is also the success colour: a success state always carries a check
 * icon and a word, never colour alone. Dark mode is the brand's own dark theme (designed, not inverted).
 *
 * Custom properties and nothing else, so a theme is one block. Three blocks carry the colours:
 *   :root                                              the light theme (also the default when nothing else applies)
 *   :root[data-theme="dark"]                           the dark theme chosen explicitly (js/app/core/theme.js and core/boot.js set the attribute)
 *   @media (prefers-color-scheme: dark) :root:not([data-theme="light"])   the dark theme when the visitor chose nothing and the system is dark
 * The two dark blocks are identical on purpose; functions/test/tokenContrast.test.js fails when they drift apart and when any text pair falls under WCAG AA.
 *
 * Use rules: text colours are --ink, --ink-soft and --ink-faint on --bg, --surface or --surface-2; fills of buttons use --accent-fill with --accent-ink; --accent is the
 * colour of accent TEXT and icons (in the light theme it is a shade darker than the fill, so it reaches 4.5:1 on every surface); borders that must be seen (inputs, checkboxes)
 * use --border-strong (3:1 against --surface, the WCAG 1.4.11 non-text minimum); decorative rules use --border. The brand panel of the sign-in pages (--aside-*) is the dark forest in
 * BOTH themes; --aside-accent is the sky as text on it.
 *
 * Breakpoints (min-width, mobile first; CSS cannot read custom properties inside a media query, so they are written out and the test pins the list): 480, 768, 1024, 1280 px.
 * Type: the brand faces lead each stack. They are this site's own files (public/css/fonts.css declares them with font-display: swap; public/fonts/ holds the Hebrew and Latin subsets), so
 * nothing is requested from another host; the rest of each stack is system faces that carry Hebrew, so a page that does not link fonts.css still reads well. --font-display is for headings
 * and the wordmark only: Secular One has one weight, so it is used at 400 with no bold synthesis. */

:root {
  color-scheme: light;

  /* colour, light */
  --bg: #EDF5F0;
  --surface: #FFFFFF;
  --surface-2: #E4EFE8;
  --border: #CADBD0;
  --border-strong: #6E8B7B;
  --ink: #0F2A20;
  --ink-soft: #33503F;
  --ink-faint: #4F6B5E;
  --accent: #176B45;
  --accent-fill: #1B7F52;
  --accent-fill-hover: #166B45;
  --accent-hover: #0F5636;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEFE4;
  --link: #176B45;
  --link-hover: #0F5636;
  --ok: #176B45;
  --ok-bg: #DDF1E6;
  --warn: #9A6200;
  --warn-bg: #FCF3DF;
  --crit: #B3261E;
  --crit-bg: #FCE8E6;
  --info: #1A6FA3;
  --info-bg: #E0F0F9;
  --focus: #1A6FA3;

  /* the brand panel of the sign-in pages (the dark forest in both themes; text on it is light) */
  --aside-bg-1: #0A1C14;
  --aside-bg-2: #123526;
  --aside-ink: #E7F3EC;
  --aside-ink-soft: #B4CCBE;
  --aside-accent: #7CCBF2;
  --aside-rule: rgba(124, 203, 242, 0.16);
  --aside-glow-1: rgba(85, 212, 154, 0.30);
  --aside-glow-2: rgba(91, 184, 234, 0.20);

  /* page backdrop behind the card: a quiet wash of the two brand hues, never a picture */
  --backdrop: radial-gradient(1100px 520px at 85% -10%, rgba(27, 127, 82, 0.10), transparent 60%), radial-gradient(900px 480px at -5% 105%, rgba(91, 184, 234, 0.12), transparent 60%);

  /* spacing, 4 px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* radius and the three elevations kept from the legacy file (the shadow is tinted with the brand ink, not a neutral grey) */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 42, 32, 0.06);
  --shadow-card: 0 1px 2px rgba(15, 42, 32, 0.05), 0 8px 24px -10px rgba(15, 42, 32, 0.16);
  --shadow-pop: 0 4px 10px -2px rgba(15, 42, 32, 0.14), 0 16px 36px -10px rgba(15, 42, 32, 0.20);

  /* type: the brand faces first (css/fonts.css), then system faces; the Hebrew stack names faces that carry Hebrew glyphs */
  --font-sans: "Assistant", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-he: "Assistant", system-ui, -apple-system, "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
  --font-display: "Secular One", "Assistant", system-ui, -apple-system, "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: clamp(26px, 1.2vw + 22px, 30px);
  --text-4xl: clamp(30px, 2.2vw + 22px, 38px);
  --leading: 1.5;
  --leading-he: 1.65;

  /* motion: zeroed for visitors who ask for less (see the block at the end) */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* layers */
  --z-header: 10;
  --z-drawer: 30;
  --z-dialog: 50;
  --z-toast: 60;
}

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

  /* colour, dark */
  --bg: #0A1C14;
  --surface: #10261C;
  --surface-2: #17342A;
  --border: #1F3A2D;
  --border-strong: #628574;
  --ink: #E7F3EC;
  --ink-soft: #C0D6C9;
  --ink-faint: #9DB8A9;
  --accent: #55D49A;
  --accent-fill: #55D49A;
  --accent-fill-hover: #7BE0B2;
  --accent-hover: #8AE3BC;
  --accent-ink: #0A1C14;
  --accent-soft: #16382A;
  --link: #55D49A;
  --link-hover: #8AE3BC;
  --ok: #55D49A;
  --ok-bg: #12392A;
  --warn: #F2B94B;
  --warn-bg: #33290F;
  --crit: #FF7A70;
  --crit-bg: #3B1B19;
  --info: #7CCBF2;
  --info-bg: #10303F;
  --focus: #7CCBF2;

  --aside-bg-1: #0A1C14;
  --aside-bg-2: #123526;
  --aside-ink: #E7F3EC;
  --aside-ink-soft: #B4CCBE;
  --aside-accent: #7CCBF2;
  --aside-rule: rgba(124, 203, 242, 0.16);
  --aside-glow-1: rgba(85, 212, 154, 0.30);
  --aside-glow-2: rgba(91, 184, 234, 0.20);

  --backdrop: radial-gradient(1100px 520px at 85% -10%, rgba(85, 212, 154, 0.09), transparent 60%), radial-gradient(900px 480px at -5% 105%, rgba(91, 184, 234, 0.08), transparent 60%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 32px -12px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 18px 40px -10px rgba(0, 0, 0, 0.70);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* colour, dark (identical to the explicit dark block above) */
    --bg: #0A1C14;
    --surface: #10261C;
    --surface-2: #17342A;
    --border: #1F3A2D;
    --border-strong: #628574;
    --ink: #E7F3EC;
    --ink-soft: #C0D6C9;
    --ink-faint: #9DB8A9;
    --accent: #55D49A;
    --accent-fill: #55D49A;
    --accent-fill-hover: #7BE0B2;
    --accent-hover: #8AE3BC;
    --accent-ink: #0A1C14;
    --accent-soft: #16382A;
    --link: #55D49A;
    --link-hover: #8AE3BC;
    --ok: #55D49A;
    --ok-bg: #12392A;
    --warn: #F2B94B;
    --warn-bg: #33290F;
    --crit: #FF7A70;
    --crit-bg: #3B1B19;
    --info: #7CCBF2;
    --info-bg: #10303F;
    --focus: #7CCBF2;

    --aside-bg-1: #0A1C14;
    --aside-bg-2: #123526;
    --aside-ink: #E7F3EC;
    --aside-ink-soft: #B4CCBE;
    --aside-accent: #7CCBF2;
    --aside-rule: rgba(124, 203, 242, 0.16);
    --aside-glow-1: rgba(85, 212, 154, 0.30);
    --aside-glow-2: rgba(91, 184, 234, 0.20);

    --backdrop: radial-gradient(1100px 520px at 85% -10%, rgba(85, 212, 154, 0.09), transparent 60%), radial-gradient(900px 480px at -5% 105%, rgba(91, 184, 234, 0.08), transparent 60%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 32px -12px rgba(0, 0, 0, 0.65);
    --shadow-pop: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 18px 40px -10px rgba(0, 0, 0, 0.70);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}