/* Fiddle App Family — Shared Design Tokens
   Canonical source: fiddle/_shared/design/design-tokens.css
   DO NOT edit per-app copies directly — edit here, then run sync-shared.sh. */

:root {
  /* Primary palette */
  --color-orange:      #b83c08;   /* primary accent, CTA buttons, retest bar fill */
  --color-orange-2:    #7a2900;   /* secondary button bg; also used for links on parchment */
  --color-orange-dark: #8f2d06;   /* active/pressed state for primary CTA */
  --color-orange-edge: #4d1903;   /* work-phase vignette / body bg behind orange screens */
  --color-parchment:   #f5efe6;   /* info/welcome overlay background */
  --color-green:       #235a39;   /* retest mode bg, toggle active, stat retest btn */
  --color-green-dark:  #0d2a1a;   /* dark forest green — retest mode bg edge / deep green surfaces */
  --color-green-light: #4d9966;   /* mid green — foreground/icon/text on dark surfaces (e.g. settings close icon, log-action feedback). Matches ear-tuner's settings-done checkmark. */
  --color-blue-break:  #141560;   /* micro-break phase bg (meditative blue) */
  --color-blue-break-dark: #080928; /* micro-break vignette edge */
  --color-danger:      #c0392b;   /* danger surface (destructive button bg, danger-modal primary) */
  --color-danger-text: #ff9999;   /* danger foreground (light red text/border on dark surfaces — stale-override badges, error inlines) */

  /* Modal/dialog backdrop scrims (sit behind elevated dialog boxes) */
  --color-backdrop-heavy:  rgba(0, 0, 0, 0.72);  /* primary dialog scrim (#tl-dialog-root and friends) */
  --color-backdrop-medium: rgba(0, 0, 0, 0.65);  /* lighter scrim (BDS dialog, sync-setup overlay) */

  /* Dark-mode surfaces */
  --color-bg-dark:           #0d0d0d;   /* base body bg / ready-phase edge */
  --color-bg-surface:        #1e1e1e;   /* primary dark surface */
  --color-bg-panel:          #1a1a1a;   /* elevated panel (settings, drawers) */
  --color-bg-panel-elevated: #2a2a2a;   /* slightly lighter than --color-bg-panel; modal/dialog/floating-progress surfaces (ear-tuner #reset-box, timeliner .tl-dialog-box / .tl-modal-box / .tl-floating-progress) */
  --color-border-panel:      #3a3a3a;   /* hairline border on elevated panels */

  /* Text */
  --color-text-dark:  #2a2018;    /* primary dark text on parchment */
  --color-text-muted: rgba(0,0,0,0.45);
  --color-warm-text:  #e8d5b0;    /* warm cream text on dark backgrounds */

  /* Fonts */
  --font:         'Inconsolata', monospace;  /* primary — all UI text */
  --font-numeric: 'Nunito', sans-serif;      /* numeric displays (timer, scores) */
  --font-caption: 'Nunito', sans-serif;      /* AV captions on segment ribbons,
                                                video overlays, time-tagged
                                                annotations across apps */

  /* Info-page typography — long-form copy on welcome/info/about screens.
     Swap --font-info to retune the reading experience without disturbing
     the chiseled-mono UI feel. Sizes are clamps so they remain responsive. */
  --font-info:            'Nunito', sans-serif;
  --font-info-heading:    clamp(20px, 6vw, 26px);   /* app-name banners */
  --font-info-subheading: clamp(11px, 3vw, 13px);   /* taglines */
  --font-info-body:       clamp(15px, 3.75vw, 17px); /* paragraphs, copy labels */

  /* Scores typography — the scores table, its section labels (SCORES,
     AVERAGE SCORE, NOTE, SCORE), and the Copy-Scores email body. Kept
     monospace for the chiseled tabular feel; separable from --font so we
     can retune the scores domain without touching button/control text. */
  --font-scores: 'Inconsolata', monospace;
}