/* ManyMath brand tokens v0.1 — source of truth: brand/BRAND.md
   Shared custom properties for ManyMath websites and apps.
   Pair with fonts.css (brand faces) and fallbacks.css (metric-matched
   fallback faces, generated by tool/compute_fallbacks.py). */

:root {
  color-scheme: light dark;

  /* All products share this green; each has its own glyph */
  --brand: #2e7d32;
  --brand-strong: #236827;
  --brand-on: #ffffff;
  --brand-soft: #dcebe0;

  /* Workbench neutrals */
  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-2: #ebf0ed;
  --fg: #17201c;
  --fg-muted: #64716b;
  --border: #d5ded9;

  /* Accent and error colors (see BRAND.md 1.3 for usage rules) */
  --accent: #b07f1f;
  --danger: #c33e4b;

  /* Shape & motion */
  --radius: 7px;
  --radius-sm: 4px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;

  /* Type stacks — webfont first, metric-matched fallback, system last */
  --font-ui: "Inter", "Inter Fallback", system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: "Latin Modern Roman", "LM Fallback", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #78c87c;
    --brand-strong: #94d697;
    --brand-on: #0e1e12;
    --brand-soft: #1d2b20;

    --bg: #101512;
    --surface: #181e1a;
    --surface-2: #202823;
    --fg: #f0f5f2;
    --fg-muted: #a5b1aa;
    --border: #303a34;

    --accent: #d9a441;
    --danger: #e06c75;
  }
}

/* Optional manual theme override (plain class/attr toggle — never :has()) */
:root[data-theme="dark"] {
  --brand: #78c87c;
  --brand-strong: #94d697;
  --brand-on: #0e1e12;
  --brand-soft: #1d2b20;

  --bg: #101512;
  --surface: #181e1a;
  --surface-2: #202823;
  --fg: #f0f5f2;
  --fg-muted: #a5b1aa;
  --border: #303a34;

  --accent: #d9a441;
  --danger: #e06c75;
}

/* Shared focus, selection, and motion styles */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

::selection {
  background: var(--brand-soft);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}