/* Karamatics design tokens, v1.
 *
 * The one file every Karamatics app needs. Each color token is defined once as light-dark(light, dark):
 * with no data-theme attribute it follows the system setting, and data-theme="light" | "dark" on <html>
 * forces a theme (see theme.js).
 *
 * In JavaScript, getPropertyValue('--purple') returns the unresolved light-dark() text. Use
 * KaramaticsTheme.color('--purple') from theme.js to get the active value.
 */

:root {
  color-scheme: light dark;

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Surfaces and text */
  --bg:          light-dark(#FFFFFF, #080B1C);
  --bg-soft:     light-dark(#F8FAFC, #0C1029);
  --surface:     light-dark(#FFFFFF, #0F1433);
  --ink:         light-dark(#0F172A, #EEF1FB);
  --ink-2:       light-dark(#334155, #C5CBE3);
  --muted:       light-dark(#5B6478, #98A1C2);
  --line:        light-dark(rgba(15, 23, 42, .10), rgba(160, 170, 255, .14));
  --line-strong: light-dark(rgba(15, 23, 42, .18), rgba(160, 170, 255, .26));
  --grid:        light-dark(rgba(15, 23, 42, .05), rgba(160, 170, 255, .07));
  --dot:         light-dark(rgba(15, 23, 42, .16), rgba(160, 170, 255, .18));
  --nav-bg:      light-dark(rgba(255, 255, 255, .78), rgba(8, 11, 28, .72));

  /* Accents (lightened in dark mode for contrast) */
  --purple:      light-dark(#7C3AED, #A78BFA);
  --purple-deep: light-dark(#5B21B6, #8B5CF6);
  --blue:        light-dark(#2563EB, #60A5FA);
  --cyan:        light-dark(#06B6D4, #22D3EE);
  --accent-text: light-dark(#5B21B6, #C4B5FD);
  --tint:        light-dark(rgba(124, 58, 237, .07), rgba(139, 92, 246, .13));
  --glow:        light-dark(rgba(124, 58, 237, .16), rgba(139, 92, 246, .30));

  /* Feedback */
  --danger:      light-dark(#B42318, #FDA29B);
  --success:     light-dark(#067647, #75E0A7);

  /* Brand constants: the same in both themes (logo, primary button, toggle knob) */
  --brand-purple: #7C3AED;
  --brand-violet: #6D28D9;
  --brand-blue: #2563EB;
  --brand-gradient: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --on-brand: #FFFFFF;

  /* Data visualization (canvas and chart strokes) */
  --cv-grid:   light-dark(rgba(15, 23, 42, .07), rgba(160, 170, 255, .09));
  --cv-axis:   light-dark(rgba(15, 23, 42, .24), rgba(160, 170, 255, .30));
  --cv-circle: light-dark(rgba(91, 33, 182, .24), rgba(196, 181, 253, .22));

  /* Layout */
  --gutter: clamp(20px, 4vw, 48px);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }