/* Design tokens.
 *
 * Light is the default and dark is applied two ways: by the system preference
 * when the user has not chosen, and by an explicit data-theme when they have.
 * The :not([data-theme="light"]) guard is what lets an explicit light choice
 * survive a dark system setting — without it the media query wins and the
 * toggle appears broken.
 *
 * The currency hues are the one thing that must stay recognisable across both
 * themes: gold, blue and rust are how the three tracks are told apart, so each
 * has a light and a dark variant tuned for contrast rather than a single value
 * that washes out on one of them.
 */

:root {
  --ink:        #f7f8fa;
  --panel:      #ffffff;
  --panel-2:    #f1f3f6;
  --rule:       #dfe3e9;
  --text:       #17202b;
  --mute:       #66717f;

  --usd:        #96751a;
  --jpy:        #2f6199;
  --irr:        #a8442c;
  --warn:       #8a5410;
  --warn-bg:    #fdf5e7;
  --up:         #1f7a4d;
  --down:       #b33a2b;

  --focus:      #2f6199;
  --shadow:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);

  --radius:     10px;
  --radius-sm:  6px;

  --font: "Vazirmatn", "IRANSans", "Segoe UI", system-ui, -apple-system,
          "Noto Sans Arabic", "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", "Menlo", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:     #0e141b;
    --panel:   #16202b;
    --panel-2: #1b2732;
    --rule:    #253242;
    --text:    #e4e9ef;
    --mute:    #7a8899;

    --usd:     #c9a227;
    --jpy:     #5b8fc7;
    --irr:     #c4634b;
    --warn:    #d08a3e;
    --warn-bg: #251c10;
    --up:      #5fa97f;
    --down:    #d1705c;

    --focus:   #c9a227;
    --shadow:  none;
  }
}

:root[data-theme="dark"] {
  --ink:     #0e141b;
  --panel:   #16202b;
  --panel-2: #1b2732;
  --rule:    #253242;
  --text:    #e4e9ef;
  --mute:    #7a8899;

  --usd:     #c9a227;
  --jpy:     #5b8fc7;
  --irr:     #c4634b;
  --warn:    #d08a3e;
  --warn-bg: #251c10;
  --up:      #5fa97f;
  --down:    #d1705c;

  --focus:   #c9a227;
  --shadow:  none;
}