/*
 * Design tokens of ram electronic GmbH, light and dark.
 * The rules behind them are in the design guide (ram/ram-corporate-design):
 * §02 colors, §04 type, §05 shapes and states, §08 dark mode. Values marked
 * "ergänzt" there are derived in oklch from the brand colors; contrasts are
 * checked by `npm test`.
 *
 * Dark mode: data-theme="dark" on <html>. Without a theme switch, set it from
 * matchMedia("(prefers-color-scheme: dark)").
 */

:root {
  /* §02 brand colors */
  --ram-lime: #a2d322;
  --ram-ink: #16151a;
  --ram-blue: #529eff;
  --ram-fog: #b3b3b3;
  --ram-paper: #ffffff;
  --ram-paper-soft: #f4f5ef;

  /* §08 supplementary colors */
  --ram-ink-soft: #2c2a35;
  --ram-ink-mute: #3e3b48;
  --ram-paper-mute: #e7e9e1;
  --ram-signal-deep: #0066ca;
  --ram-signal-light: #68aaff;

  /* §04 typeface */
  --ram-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* §05 status: full marker colors in both modes (dots, icons, borders) */
  --status-ok: #3f9e5c;
  --status-warn: #c98a1f;
  --status-crit: #d85a4e;

  /* §05 shapes */
  --ram-radius: 0;
  --ram-radius-tag: 3px;
  --ram-radius-pill: 9999px;
  --ram-border: 1px;
  --ram-shadow-ink: 0 24px 48px -16px rgb(0 0 0 / 0.6); /* dark mode and Ink ground only */

  /* §05 states */
  --ram-focus-offset: 2px;
  --ram-disabled-opacity: 0.5;
  --ram-transition: 0.215s ease-in-out;

  /* §08 semantic tokens, light */
  --background: var(--ram-paper);
  --foreground: var(--ram-ink);
  --card: var(--ram-paper-soft);
  --card-foreground: var(--ram-ink);
  --popover: var(--ram-paper);
  --popover-foreground: var(--ram-ink);
  --primary: var(--ram-lime);
  --primary-foreground: var(--ram-ink);
  --primary-hover: #93c200; /* Lime −1, both modes */
  --primary-active: #86b100; /* Lime −2, both modes */
  --secondary: var(--ram-paper-mute);
  --secondary-foreground: var(--ram-ink);
  --muted: var(--ram-paper-mute);
  --muted-foreground: #63626b;
  --accent: var(--ram-paper-mute);
  --accent-foreground: var(--ram-ink);
  --destructive: #b93f35;
  --destructive-foreground: var(--ram-paper);
  --border: var(--ram-paper-mute);
  --input: #807f87;
  --ring: var(--ram-signal-deep);
  --link: var(--ram-signal-deep);
  --link-hover: #0058b0; /* Signal Deep −1 */
  --success: #dff6e3;
  --success-foreground: #175c2f;
  --warning: #fdecd5;
  --warning-foreground: #6c4300;
  --info: #dff0ff;
  --info-foreground: #244d82;
  --navbar: var(--ram-paper);
  --navbar-foreground: var(--ram-ink);
  --navbar-primary: var(--ram-lime);
  --navbar-primary-foreground: var(--ram-ink);
  --navbar-accent: var(--ram-paper-mute);
  --navbar-accent-foreground: var(--ram-ink);
  --navbar-border: var(--ram-paper-mute);
  --navbar-ring: var(--ram-signal-deep);
  --icon-on-color-light: var(--ram-ink);
  --icon-on-color-dark: var(--ram-paper);
}

/* §08 semantic tokens, dark: only what differs from light */
:root[data-theme="dark"] {
  --background: var(--ram-ink);
  --foreground: var(--ram-paper);
  --card: var(--ram-ink-soft);
  --card-foreground: var(--ram-paper);
  --popover: var(--ram-ink-soft);
  --popover-foreground: var(--ram-paper);
  --secondary: var(--ram-ink-mute);
  --secondary-foreground: var(--ram-paper);
  --muted: var(--ram-ink-mute);
  --muted-foreground: var(--ram-fog);
  --accent: var(--ram-ink-mute);
  --accent-foreground: var(--ram-paper);
  --destructive: #e66f62;
  --destructive-foreground: var(--ram-ink);
  --border: var(--ram-ink-mute);
  --ring: var(--ram-signal-light);
  --link: var(--ram-signal-light);
  --link-hover: #86baff; /* Signal Light +1 */
  --success: #17321e;
  --success-foreground: #9adda9;
  --warning: #3a270b;
  --warning-foreground: #f2c17f;
  --info: #1a2c44;
  --info-foreground: #9fceff;
  --navbar: var(--ram-ink-soft);
  --navbar-foreground: var(--ram-paper);
  --navbar-accent: var(--ram-ink-mute);
  --navbar-accent-foreground: var(--ram-paper);
  --navbar-border: var(--ram-ink-mute);
  --navbar-ring: var(--ram-signal-light);
}