/* Karamatics design tokens, v2 ("Cobalt").
 *
 * Replaces v1's purple-to-blue gradient with one solid cobalt and square-edged components. The fonts are unchanged:
 * link ../v1/fonts.css before this file. 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('--primary') returns the unresolved light-dark() text. Use
 * KaramaticsTheme.color('--primary') from theme.js to get the active value.
 */

:root {
  color-scheme: light dark;

  /* Type (self-hosted by ../v1/fonts.css) */
  --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, #0B0F1A);
  --bg-soft:     light-dark(#F4F6FB, #101627);
  --surface:     light-dark(#FFFFFF, #141B2D);
  --ink:         light-dark(#0E1525, #EDF0F7);
  --ink-2:       light-dark(#364055, #C3C9D8);
  --muted:       light-dark(#586276, #9AA3B8);
  --line:        light-dark(#E2E6EE, #232C42);
  --line-strong: light-dark(#C5CCDA, #36425E);
  --grid:        light-dark(rgba(14, 21, 37, .05), rgba(142, 166, 255, .07));
  --dot:         light-dark(rgba(14, 21, 37, .18), rgba(142, 166, 255, .20));
  --nav-bg:      light-dark(rgba(255, 255, 255, .84), rgba(11, 15, 26, .80));

  /* Primary: the one saturated color. Hover and press step darker in light mode, lighter in dark mode. */
  --primary:       light-dark(#2446C8, #8EA6FF);
  --primary-hover: light-dark(#1A369F, #ADBFFF);
  --primary-press: light-dark(#142B80, #C4D1FF);
  --on-primary:    light-dark(#FFFFFF, #0A1033);
  --accent-text:   light-dark(#2446C8, #9DB2FF);
  --tint:          light-dark(#EDF1FD, #19234A);
  --mark:          light-dark(#2446C8, #8EA6FF);
  --focus:         var(--primary);

  /* Feedback (kept apart from the primary color; always pair with text or an icon) */
  --danger:      light-dark(#B42318, #FDA29B);
  --success:     light-dark(#067647, #75E0A7);
  --warning:     light-dark(#8A5A00, #F5C76B);

  /* Brand constants: the same in both themes */
  --brand-cobalt: #2446C8;
  --brand-ink:    #0E1A4D;   /* closing panels and other dark brand surfaces */
  --on-brand:     #FFFFFF;
  --panel:        var(--brand-ink);
  --panel-ink:    #EEF1FD;
  --panel-muted:  #B8C3EE;

  /* Data visualization (canvas and chart strokes) */
  --cv-grid:   light-dark(rgba(14, 21, 37, .07), rgba(142, 166, 255, .09));
  --cv-axis:   light-dark(rgba(14, 21, 37, .24), rgba(142, 166, 255, .30));
  --cv-circle: light-dark(rgba(36, 70, 200, .24), rgba(142, 166, 255, .24));

  /* Shape: square-edged. Controls (buttons, fields, tabs, chips) take --radius-sm, containers (cards, menus) --radius. */
  --radius-sm: 2px;
  --radius:    3px;
  --shadow-pop: 0 1px 2px light-dark(rgba(14, 21, 37, .06), rgba(0, 0, 0, .4)), 0 12px 32px -18px light-dark(rgba(14, 21, 37, .28), rgba(0, 0, 0, .7));

  /* Motion: presses land fast, releases spring back */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

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

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