/*
 * AUTO-GENERATED — DO NOT EDIT
 *
 * This is a derived, non-editable copy. Canonical source: doremifo-context
 * repo, design/tokens.css.
 * Canonical commit: 4a2ca45f2368022b89324dd5927c1159f9c341ea
 * Token set version: 1.1.0
 * Content SHA-256: 0515c3ba5aa07470e9603ba0aa480605ad7a907ddea864c58caca574fca1787c
 *
 * Manual edits here are overwritten without warning on the next sync run.
 * Edit the canonical source and re-run design/sync_tokens.sh --apply.
 */

/*
 * DoReMiFo — shared design tokens ("Perceptual Instrument" direction)
 * token-version: 1.1.0
 *
 * Canonical source for doremifo.com and play.doremifo.com. This file is
 * hand-edited ONLY here, in doremifo-context/design/tokens.css. Downstream
 * repos (doremifo-homepage, match-the-sound) receive a generated,
 * non-editable copy via design/sync_tokens.sh — see that script and its
 * README for the sync/validation workflow.
 *
 * Values are the ones approved 2026-09-17 for the cross-site visual
 * redesign. Font tokens use system stacks only (Bohdan's decision:
 * no self-hosted or CDN-loaded webfonts for this round).
 */

:root {
  /* ── Color ── */
  --color-ink:            #101514; /* primary text, dark surfaces */
  --color-paper:          #F4F1E9; /* warm primary background */
  --color-surface:        #FFFFFF; /* cards and raised surfaces */
  --color-teal:           #086A60; /* primary brand color */
  --color-teal-dark:      #054E47; /* hover / active states */
  --color-mint:           #A9F5D0; /* subtle highlights — not for small text */
  --color-spectral-blue:  #72C7FF; /* secondary visual accent — not for small text */
  --color-graphite:       #68716E; /* secondary text — only on --color-surface (5.03:1); too low on --color-paper/--color-ink */
  --color-muted-on-paper: #565E5A; /* secondary text directly on --color-paper — 5.92:1 */
  --color-muted-on-dark:  #A6ACA9; /* secondary text directly on --color-ink — 7.98:1 */
  --color-border:         #D8DDD9; /* dividers and borders */

  /* Accessible status colors — functional states, never decoration */
  --color-error:          #B3261E; /* ~5.9:1 on --color-surface */
  --color-error-bg:       #FDECEA;
  --color-error-border:   #F3C1BC;
  --color-success:        #1A7F37; /* ~4.6:1 on --color-surface */
  --color-success-bg:     #E6F4EA;
  --color-success-border: #B7DFC3;

  /* ── Typography ── */
  /* System stacks only — no Google Fonts request, no self-hosted binaries
     in this round (2026-09-17 decision). Revisit self-hosting as a
     separate, later task with a verified license and asset pipeline. */
  --font-display: Inter, system-ui, sans-serif;
  --font-body:    Inter, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --measure-max: 72ch; /* upper bound of the ~60–72 character line-length target */

  /* ── Spacing scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Geometry ── */
  --radius-sm:   8px;  /* tiles, small controls */
  --radius-md:  12px;  /* cards */
  --radius-lg:  18px;  /* large cards, hero panels */
  --radius-full: 999px; /* pills, fully-rounded buttons */
  --border-width: 1px;
  --shadow-card: 0 1px 2px rgba(16, 21, 20, 0.06), 0 1px 3px rgba(16, 21, 20, 0.08);

  /* ── Motion ── */
  --motion-fast:     120ms;
  --motion-standard: 200ms;
  --motion-reveal:   300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * ── Breakpoints (reference only) ──
 * Plain CSS custom properties cannot parameterize @media queries.
 * Each site's own stylesheet uses these literal values directly in its
 * media rules; documented here so both sites stay in sync by convention:
 *
 *   mobile:  < 640px
 *   tablet:  640px – 1023px
 *   desktop: >= 1024px
 *   wide:    >= 1440px
 */