/*
  linkmybots design tokens: Direction A "Relay" (#208).
  Source: docs/design/designer/mockups/theme.css (v0.3.5). Values match it exactly; spacing, motion,
  type and line-height tokens are new here.

  Theme: light is the default. Dark follows the system setting (prefers-color-scheme)
  unless the person picks one, which sets <html data-theme="light|dark"> (see js/theme.js,
  loaded blocking in <head> so there is no flash on load).
  The three color blocks below must stay identical in dark; Lmb.Site.Tests checks it.

  Rules (docs/design/designer/UX.md §0.5a, #215, #217):
  - Components read tokens only. No hex, rgb or named colors outside this file.
  - Logical properties only (margin-inline-start, padding-block, inset-inline, text-align: start).
  - Font stacks end in system fallbacks for scripts the brand fonts don't cover
    (Arabic, Hebrew, CJK, Devanagari). The self-hosted Latin subsets are in fonts.css (#210).
*/

:root {
  color-scheme: light dark;

  /* Color: light */
  --on-solid: #ffffff;
  --bg: #ffffff;
  --surface: #f5f7fb;
  --card: #ffffff;
  --hair: #e3e7ef;
  --border: #8b93a7;
  --text: #0f172a;
  --muted: #4b5567;
  --primary: #3346d3;
  --primary-ink: #ffffff;
  --primary-soft: #eef0fd;
  --teal: #2ec4b6;
  --teal-text: #0b7a70;
  --teal-soft: #e6f7f5;
  --success: #166c34;
  --success-soft: #e8f5ec;
  --warn: #a14b05;
  --warn-soft: #fdf3e4;
  --danger: #c0262d;
  --danger-soft: #fdecec;
  --gb: #3346d3;
  --gb-ink: #ffffff;
  --hm: #0f172a;
  --hm-ink: #ffffff;
  /* New in #208: replace hard-coded colors that were in the mockup components. */
  --on-grad: #ffffff;
  --knob-off: #ffffff;
  --scrim: rgba(11, 15, 23, .55);
  --focus: #3346d3;

  /* Shadow, gradient, radius */
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .35);
  --grad: linear-gradient(135deg, #3346d3, #0b7a70);
  --r-card: 14px;
  --r-ctl: 10px;
  --r-sm: 6px;
  --r-pill: 999px;

  /* Type. Brand fonts first (Latin subsets, fonts.css), then system fallbacks for other scripts. */
  --font-fallback: system-ui, "Noto Sans", "Segoe UI", sans-serif;
  --font-body: Inter, var(--font-fallback);
  --font-display: "Space Grotesk", Inter, var(--font-fallback);
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Noto Sans Mono", monospace, var(--font-fallback);

  /* Type scale (BRAND.md: 15 body, 13 small, 12 caption). rem so browser text size is respected. */
  --fs-2xs: .71875rem;  /* 11.5px: chips, table headers */
  --fs-xs: .75rem;      /* 12px caption */
  --fs-sm: .8125rem;    /* 13px small */
  --fs-md: .875rem;     /* 14px UI */
  --fs-body: .9375rem;  /* 15px body */
  --fs-lg: 1rem;        /* 16px lead */
  --fs-h3: 1.0625rem;   /* 17px */
  --fs-h2: 1.5rem;      /* 24px */
  --fs-h1-sm: 1.75rem;  /* 28px page titles, h1 on small screens */
  --fs-h1: 2.125rem;    /* 34px */
  --fs-display: 2.5rem; /* 40px */

  /* Line height. Body stays at 1.4 or more. Headings keep the English look (1.1);
     scripts with tall ascenders or descenders switch to --lh-heading-tall (below). */
  --lh-body: 1.5;
  --lh-prose: 1.7;
  --lh-tight: 1.2;
  --lh-heading: 1.1;
  --lh-heading-tall: 1.3;

  /* Spacing: 4px grid (BRAND.md). */
  --space-1: .25rem;  /* 4 */
  --space-2: .5rem;   /* 8 */
  --space-3: .75rem;  /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem;  /* 24 */
  --space-8: 2rem;    /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem;   /* 48 */
  --space-16: 4rem;   /* 64 */

  /* Motion. Zeroed under prefers-reduced-motion (below). */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(.3, 0, 1, 1);
}

/* Explicit choice: dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --on-solid: #0b0f17;
  --bg: #0b0f17;
  --surface: #0f1420;
  --card: #161c29;
  --hair: #262e40;
  --border: #667089;
  --text: #e7eaf3;
  --muted: #9aa3b8;
  --primary: #8b9cff;
  --primary-ink: #0b0f17;
  --primary-soft: #1d2540;
  --teal: #2ec4b6;
  --teal-text: #3dd6c6;
  --teal-soft: #0f3a37;
  --success: #4ade80;
  --success-soft: #11301f;
  --warn: #fbbf24;
  --warn-soft: #33270b;
  --danger: #ff7a7f;
  --danger-soft: #3a1719;
  --gb: #6d7ff5;
  --gb-ink: #0b0f17;
  --hm: #cbd2e1;
  --hm-ink: #0b0f17;
  --on-grad: #ffffff;
  --knob-off: #e7eaf3;
  --focus: #8b9cff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}

/* Explicit choice: light. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* System setting: dark, unless the person picked light. Keep in sync with [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --on-solid: #0b0f17;
    --bg: #0b0f17;
    --surface: #0f1420;
    --card: #161c29;
    --hair: #262e40;
    --border: #667089;
    --text: #e7eaf3;
    --muted: #9aa3b8;
    --primary: #8b9cff;
    --primary-ink: #0b0f17;
    --primary-soft: #1d2540;
    --teal: #2ec4b6;
    --teal-text: #3dd6c6;
    --teal-soft: #0f3a37;
    --success: #4ade80;
    --success-soft: #11301f;
    --warn: #fbbf24;
    --warn-soft: #33270b;
    --danger: #ff7a7f;
    --danger-soft: #3a1719;
    --gb: #6d7ff5;
    --gb-ink: #0b0f17;
    --hm: #cbd2e1;
    --hm-ink: #0b0f17;
    --on-grad: #ffffff;
    --knob-off: #e7eaf3;
    --focus: #8b9cff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

/* Always-dark band (the home page security section, #149) in both themes: the dark theme's
   surface and text tokens, scoped to the band. Keep in sync with [data-theme="dark"]. */
.band-dark {
  color-scheme: dark;
  --bg: #0b0f17;
  --surface: #0f1420;
  --card: #161c29;
  --hair: #262e40;
  --text: #e7eaf3;
  --muted: #9aa3b8;
  --primary: #8b9cff;
  --primary-soft: #1d2540;
  --teal-text: #3dd6c6;
  --focus: #8b9cff;
}

/* Tall scripts: per-locale heading line height (docs/design/designer/UX.md §0.5a). Set by <html lang> from #215,
   or by data-script="tall" on any wrapper. Latin, Greek and Cyrillic keep 1.1. */
:is(:lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(yi),
    :lang(hi), :lang(mr), :lang(ne), :lang(bn), :lang(pa), :lang(gu), :lang(ta), :lang(te),
    :lang(kn), :lang(ml), :lang(si), :lang(th), :lang(lo), :lang(km), :lang(my), :lang(bo),
    :lang(vi), :lang(zh), :lang(ja), :lang(ko)),
[data-script="tall"] {
  --lh-heading: var(--lh-heading-tall);
}

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

  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}