/* Shared tokens. Both the Mini App and admin panel opt into the approved Minder light theme
 * with html[data-theme="minder"]; see docs/design-system.md for the design contract.
 *
 * style.css and admin/style.css each carried their own copy of this block, byte-identical
 * apart from --danger, which only the admin panel had declared. Two copies of a palette is
 * one colour changed in the wrong file away from the calendar and the panel disagreeing about
 * what "surface" means -- and nothing would have failed to say so.
 *
 * Served by the existing static route: add_static("/static/", STATIC_DIR) in server.py already
 * covers this file and everything under static/admin/, so linking it needed no routing change.
 * Both pages load it before their own stylesheet.
 */

:root {
  /* Minder / 05 «Белый ритм». Namespaced foundations can also be imported by a
     future landing page without changing its theme. */
  --minder-bg: #ffffff;
  /* The page colour at zero opacity, for fades. Not the keyword `transparent`: that is black at
     zero opacity, and Safari before 15.4 blended a gradient through it, so a white fade went
     grey in the middle. Keep it in step with --minder-bg. */
  --minder-bg-clear: rgba(255, 255, 255, 0);
  --minder-surface: #e9f2f8;
  --minder-selected: #dceaf4;
  --minder-accent: #3f6c8f;
  --minder-ink: #203e55;
  --minder-muted: #526b7d;
  --minder-line: #dbe7ef;
  --minder-on-accent: #ffffff;
  --minder-danger: #a24848;
  --minder-danger-surface: #fbefef;
  --minder-danger-line: #e8caca;

  --minder-font-heading: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --minder-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --minder-font-number: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --minder-text-heading: 30px;
  --minder-leading-heading: 38px;
  --minder-text-body: 14px;
  --minder-leading-body: 21px;
  --minder-text-strong: 16px;
  --minder-leading-strong: 24px;
  --minder-text-caption: 13px;
  --minder-leading-caption: 19px;
  --minder-text-label: 12px;
  --minder-leading-label: 18px;
  --minder-leading-button: 20px;

  --minder-space-4: 4px;
  --minder-space-8: 8px;
  --minder-space-12: 12px;
  --minder-space-16: 16px;
  --minder-space-20: 20px;
  --minder-space-24: 24px;
  --minder-space-32: 32px;
  --minder-space-48: 48px;
  --minder-page-gutter: var(--minder-space-24);

  --minder-radius-small: 8px;
  --minder-radius-segment: 12px;
  --minder-radius-day: 14px;
  --minder-radius-input: 16px;
  --minder-radius-calendar: 18px;
  --minder-radius-nav-item: 22px;
  --minder-radius-nav: 26px;
  --minder-radius-surface: 28px;
  --minder-control-min: 44px;
  --minder-button-height: 48px;
  --minder-completion-size: 24px;
  --minder-row-min: 72px;
  --minder-motion-fast: 150ms;

  /* Mini App density. The calendar's own chrome -- footer, big date, cards -- runs tighter than
     the shared scale above. That scale is copied in rem by the landing page
     (landing/tests/tokens.test.mjs checks the copies) and the admin panel uses it as it is, so
     these are new names rather than edits to those values: neither moves. Every control here is
     still 44px or more to tap; only the space around the controls went. */
  --minder-app-radius-surface: 22px;
  --minder-app-radius-dock: 25px;
  --minder-app-radius-dock-item: 22px;
  --minder-app-button-height: 44px;
  --minder-app-dock-item-height: 44px;
  --minder-app-date-size: 52px;
  --minder-app-date-leading: 56px;
  /* The outline on the current mode and section: the accent lightened 15%, 3.6:1 against the
     tinted track and 3.3:1 against the pill. WCAG 1.4.11 asks 3:1 of a state marker, and 1.5px of
     the full accent (4.9:1) read as a button on a phone. Do not lighten it further: at 25% it
     is 2.9:1. */
  --minder-app-state-line: #5c82a0;

  --bg: #0e0f10;
  --surface: #18191b;
  --surface-2: #212327;
  --border: rgba(255, 255, 255, 0.07);
  --text: #f2f2f2;
  --text-dim: #9a9ca3;
  --accent: #d4f56a;
  --accent-text: #14150f;
  /* Was declared only in the admin panel. The calendar reaches for the same red in two places
     (#sheet-actions .danger, #sheet-error) and had it hard-coded as #ff8f8f -- a lighter shade
     of the same intent, arrived at separately. Left as-is there for now: unifying them is a
     visual change to the calendar, not a deduplication. */
  --danger: #ff6b6b;

  /* Legacy dark defaults. The light admin panel overrides data, status and grid colours in
     admin/style.css; every status also has a glyph and a word, independent of colour. */
  --ok: #0ca30c;
  --warn: #fab219;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  /* Hairline behind the plot area -- present enough to read a level against, quiet enough that
     the line stays the loudest thing in the box. */
  --grid: #2c2c2a;

  /* Legacy font fallback; the Minder theme below selects Inter, Manrope and JetBrains Mono. */
  --font-sans: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="minder"] {
  color-scheme: light;
  --bg: var(--minder-bg);
  --surface: var(--minder-surface);
  --surface-2: var(--minder-selected);
  --border: var(--minder-line);
  --text: var(--minder-ink);
  --text-dim: var(--minder-muted);
  --accent: var(--minder-accent);
  --accent-text: var(--minder-on-accent);
  --danger: var(--minder-danger);
  --font-sans: var(--minder-font-body);
  --font-heading: var(--minder-font-heading);
  --font-mono: var(--minder-font-number);
}

* {
  box-sizing: border-box;
}