/* IoTAPS "board" landing tokens — engineering-spec marketing theme.
   Schibsted Grotesk for display, JetBrains Mono for technical labels.
   Independent of design/paper/tokens.css; consoles and Dex stay on paper.
   theme.js sets html[data-theme] before paint (light / dark / system). */
:root, [data-theme="light"] {
  color-scheme: light;

  --paper: #f4f6f6;
  --paper-2: #e9eeee;
  --paper-3: #dde5e5;
  --surface: #ffffff;
  --white: #ffffff;

  --ink: #131a1c;
  --ink-2: #3c474b;
  --muted: #68757a;

  --rule: #dde3e4;
  --rule-strong: #b9c4c7;
  --field-border: #7d8a8e;

  --link: #00666a;
  --accent: #008184;
  --accent-hover: #00666a;
  --accent-ink: #00575b;
  --on-accent: #ffffff;
  --accent-bg: #e3f2f2;
  --accent-soft: #cfe8e8;
  --ok: #247a38;
  --ok-bg: #e9f4e8;
  --warn: #8a5a00;
  --warn-bg: #fbf1dc;
  --danger: #b42318;
  --danger-bg: #fbeceb;
  --info: #00666a;
  --info-bg: #e3f2f2;
  --neutral-bg: #eceff0;

  /* Arduino-style product tiles — foregrounds are explicit per tile so
     text never inherits a near-white colour on a light tile (dark mode
     included: the grey tile goes dark, it does not stay #ececec). */
  --tile-grey-bg: #e8ebeb;
  --tile-grey-fg: #131a1c;
  --tile-grey-muted: #4c5a5e;
  --tile-dark-bg: #141d20;
  --tile-dark-fg: #f2f7f7;
  --tile-dark-muted: rgb(242 247 247 / 0.66);
  --tile-teal-bg: #00777b;
  --tile-teal-fg: #ffffff;
  --tile-teal-muted: rgb(255 255 255 / 0.78);

  /* Contained feature banner */
  --banner-bg: linear-gradient(112deg, #eef7f6 0%, #e2f0ee 52%, #f4f8f5 100%);
  --banner-border: #c3dcd8;

  /* Audience / block fills */
  --block-dark: #232d31;
  --block-teal: #00666a;
  --block-orange: #bc5724;
  --block-navy: #1d3a5c;
  --on-block: #ffffff;

  --code-bg: #111a1d;
  --code-fg: #e9f1f2;
  --code-muted: #8b9a9e;
  --code-line: #26343a;

  --chart-line: #008184;
  --chart-band: rgba(0, 129, 132, 0.14);

  --on-ink: #ffffff;
  --ink-hover: #000000;
  --row-hover: #f4f8f8;
  --warn-mark: #d4a12a;
  --shade: 19 26 28;
  --logo-edge: transparent;

  --sans: "Schibsted Grotesk", "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gutter: 24px;
  --header-h: 66px;
  --topbar-h: 52px;
  --sidebar-w: 248px;
  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(19 26 28 / 0.05), 0 2px 8px rgb(19 26 28 / 0.04);
  --shadow-md: 0 1px 2px rgb(19 26 28 / 0.06), 0 10px 28px rgb(19 26 28 / 0.09);
  --shadow-lg: 0 2px 4px rgb(19 26 28 / 0.07), 0 24px 54px rgb(19 26 28 / 0.13);

  --dw-shadow-2: 0 1px 2px rgb(19 26 28 / 0.06), 0 8px 24px rgb(19 26 28 / 0.06);
  --dw-shadow-3: 0 2px 4px rgb(19 26 28 / 0.08), 0 16px 40px rgb(19 26 28 / 0.1);
  --dw-on-accent: #ffffff;
  --dw-thumb: #ffffff;
  --dw-term-bg: #111a1d;
  --dw-term-text: #e9f1f2;
  --dw-term-muted: #8b9a9e;
  --dw-blue: #1a4fb4;
  --dw-sky: #0b6894;
  --dw-teal: #008184;
  --dw-green: #247a38;
  --dw-lime: #4d6a12;
  --dw-amber: #8a5a00;
  --dw-orange: #bc5724;
  --dw-red: #b42318;
  --dw-pink: #a63168;
  --dw-purple: #6b3fa0;
  --dw-slate: #68757a;
  --dw-ink: #131a1c;
}

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

  --paper: #101619;
  --paper-2: #161f23;
  --paper-3: #1e2a2f;
  --surface: #182125;
  --white: #182125;

  --ink: #edf2f3;
  --ink-2: #c3cdcf;
  --muted: #97a5a9;

  --rule: #2a363c;
  --rule-strong: #43545b;
  --field-border: #71828a;

  --link: #63d3d7;
  --accent: #2ebfc4;
  --accent-hover: #55ccd1;
  --accent-ink: #7fdde1;
  --on-accent: #0d1517;
  --accent-bg: #17393f;
  --accent-soft: #1d454c;
  --ok: #74c98a;
  --ok-bg: #152a1c;
  --warn: #e5b558;
  --warn-bg: #2f2512;
  --danger: #f4877b;
  --danger-bg: #351a17;
  --info: #63d3d7;
  --info-bg: #17393f;
  --neutral-bg: #232f35;

  --tile-grey-bg: #1d282d;
  --tile-grey-fg: #edf2f3;
  --tile-grey-muted: #a7b5ba;
  --tile-dark-bg: #0c1214;
  --tile-dark-fg: #f2f7f7;
  --tile-dark-muted: rgb(242 247 247 / 0.62);
  --tile-teal-bg: #005f63;
  --tile-teal-fg: #ffffff;
  --tile-teal-muted: rgb(255 255 255 / 0.76);

  --banner-bg: linear-gradient(112deg, #14282b 0%, #12272a 55%, #142125 100%);
  --banner-border: #26555c;

  --block-dark: #0d1417;
  --block-teal: #00777b;
  --block-orange: #bc5724;
  --block-navy: #132a47;
  --on-block: #ffffff;

  --code-bg: #0a0f11;
  --code-fg: #e9f1f2;
  --code-muted: #7e8f94;
  --code-line: #223037;

  --chart-line: #2ebfc4;
  --chart-band: rgba(46, 191, 196, 0.18);

  --on-ink: #101619;
  --ink-hover: #ffffff;
  --row-hover: #1b262b;
  --warn-mark: #d4a12a;
  --shade: 0 0 0;
  --logo-edge: #43545b;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.25);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.45), 0 24px 54px rgb(0 0 0 / 0.45);

  --dw-shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3);
  --dw-shadow-3: 0 2px 4px rgb(0 0 0 / 0.45), 0 16px 40px rgb(0 0 0 / 0.45);
  --dw-on-accent: #101619;
  --dw-thumb: #edf2f3;
  --dw-term-bg: #0a0f11;
  --dw-term-text: #e9f1f2;
  --dw-term-muted: #7e8f94;
  --dw-blue: #8cb0ff;
  --dw-sky: #6cc0e8;
  --dw-teal: #2ebfc4;
  --dw-green: #74c98a;
  --dw-lime: #a8c86a;
  --dw-amber: #e5b558;
  --dw-orange: #e8925a;
  --dw-red: #f4877b;
  --dw-pink: #ee90be;
  --dw-purple: #b9a0f0;
  --dw-slate: #97a5a9;
  --dw-ink: #edf2f3;
}