/*! Console design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Accent presets: data-accent="amber"
   or data-accent="leaf" on <html> (teal is the default and needs no attribute).
   Density: data-density="compact" on <html> or any container (see components/base). */

:root {
  color-scheme: light;

  /* Surfaces: canvas is the app floor, panels sit on it, the sidebar is one shade darker */
  --cn-canvas: #f4f5f5;
  --cn-panel: #ffffff;
  --cn-sidebar: #ebeded;
  --cn-well: #eff1f1;
  --cn-raised: #ffffff;
  --cn-hover: #f0f2f2;

  /* Text */
  --cn-ink: #0f1313;
  --cn-text: #252b2c;
  --cn-muted: #434b4d;

  /* Lines: 1px borders do the separation work */
  --cn-line: #e0e3e3;
  --cn-line-strong: #cdd2d3;
  --cn-control: #788184;

  /* Accent: signal teal (selection, focus, links, the primary action) */
  --cn-accent: #0a7369;
  --cn-accent-text: #04564f;
  --cn-accent-soft: #e1f1ee;
  --cn-on-accent: #ffffff;
  --cn-focus: #0a7369;

  /* Primary button */
  --cn-btn: #0a7369;
  --cn-btn-hover: #075c54;
  --cn-btn-ink: #ffffff;

  /* Status: text color, soft fill, and the solid dot */
  --cn-ok: #11683a;
  --cn-ok-soft: #e3f3e8;
  --cn-ok-dot: #1b9150;
  --cn-warn: #7f4a00;
  --cn-warn-soft: #fcefd8;
  --cn-warn-dot: #b07200;
  --cn-danger: #a8231b;
  --cn-danger-soft: #fdebe9;
  --cn-danger-dot: #d3352a;
  --cn-info: #1b5a8f;
  --cn-info-soft: #e4eef8;
  --cn-info-dot: #2a72bf;
  --cn-idle-dot: #7a8487;

  /* Data viz: categorical (lightness alternates so neighbors survive color-vision deficiencies) */
  --cn-viz-1: #0d8074;
  --cn-viz-2: #b97400;
  --cn-viz-3: #2b5ea8;
  --cn-viz-4: #d0503f;
  --cn-viz-5: #3f6d12;
  --cn-viz-6: #3d474c;
  /* Sequential ramp (low to high) and diverging ramp (negative, neutral, positive) */
  --cn-seq-1: #d5efeb;
  --cn-seq-2: #9fd9d0;
  --cn-seq-3: #5cb8ac;
  --cn-seq-4: #1f8e81;
  --cn-seq-5: #0b5f56;
  --cn-div-1: #b8372b;
  --cn-div-2: #e8a89f;
  --cn-div-3: #e3e6e6;
  --cn-div-4: #8fcfc6;
  --cn-div-5: #0b6e64;

  /* Inverted bits: tooltips and the code well */
  --cn-tip-bg: #1d2223;
  --cn-tip-ink: #f1f3f3;
  --cn-code-bg: #eff1f1;
  --cn-code-ink: #1c2223;
  --cn-code-muted: #434b4d;
  --cn-code-string: #0d5a31;
  --cn-code-key: #04564f;

  /* Night: the always-dark screen (hero screen, social card). Same values in both themes. */
  --cn-night-canvas: #111314;
  --cn-night-panel: #171a1b;
  --cn-night-sidebar: #0c0e0f;
  --cn-night-well: #1c2021;
  --cn-night-raised: #1e2223;
  --cn-night-hover: #1d2122;
  --cn-night-ink: #eef1f1;
  --cn-night-text: #d2d8d9;
  --cn-night-muted: #a8b1b3;
  --cn-night-line: #292e30;
  --cn-night-line-strong: #383e40;
  --cn-night-control: #737d80;
  --cn-night-accent: #2ebfae;
  --cn-night-accent-text: #62d5c7;
  --cn-night-accent-soft: #0b2622;
  --cn-night-on-accent: #05110f;
  --cn-night-focus: #3fcabb;
  --cn-night-btn: #2ebfae;
  --cn-night-btn-hover: #55d1c2;
  --cn-night-btn-ink: #05110f;
  --cn-night-ok: #62d293;
  --cn-night-ok-soft: #11291b;
  --cn-night-ok-dot: #4cc47e;
  --cn-night-warn: #f0b55c;
  --cn-night-warn-soft: #2b210e;
  --cn-night-warn-dot: #e5a43a;
  --cn-night-danger: #ff8d81;
  --cn-night-danger-soft: #311613;
  --cn-night-danger-dot: #f0685c;
  --cn-night-info: #7cb6f2;
  --cn-night-info-soft: #112333;
  --cn-night-info-dot: #5c9de6;
  --cn-night-idle-dot: #7f8a8d;
  --cn-night-viz-1: #2ebfae;
  --cn-night-viz-2: #efb04a;
  --cn-night-viz-3: #5b8ad9;
  --cn-night-viz-4: #f59a88;
  --cn-night-viz-5: #a6d971;
  --cn-night-viz-6: #8e999d;
  --cn-night-tip-bg: #e6eaea;
  --cn-night-tip-ink: #121415;

  /* Scrim and elevation: shadows exist only for menus, popovers, palette and dialogs */
  --cn-scrim: rgba(12, 15, 16, 0.42);
  --cn-shadow-pop: 0 1px 2px rgba(15, 19, 19, 0.06), 0 12px 28px -6px rgba(15, 19, 19, 0.18);
  --cn-shadow-dialog: 0 2px 4px rgba(15, 19, 19, 0.06), 0 28px 64px -12px rgba(15, 19, 19, 0.32);

  /* Type */
  --cn-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --cn-font-mono: "IBM Plex Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --cn-fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);    /* 36 to 56: marketing h1 */
  --cn-fs-title: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);  /* 28 to 36: marketing h2 */
  --cn-fs-section: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); /* 24 to 30: section titles beside content */
  --cn-fs-headline: 1.5rem;                                   /* 24: app page title, prose h2 */
  --cn-fs-subhead: 1.25rem;                                   /* 20: prose h3, dialog title */
  --cn-fs-card: 1rem;                                         /* 16: card, plan, feature titles */
  --cn-fs-lede: 1.125rem;                                     /* 18: marketing lede */
  --cn-fs-body: 1rem;                                         /* 16: reading paragraphs, every input */
  --cn-fs-ui: 0.875rem;                                       /* 14: the UI base */
  --cn-fs-meta: 0.8125rem;                                    /* 13: row meta, hints, timestamps */
  --cn-fs-caption: 0.75rem;                                   /* 12: kbd, badges, axis labels */
  --cn-lh-display: 1.08;
  --cn-lh-title: 1.2;
  --cn-lh-headline: 2rem;    /* 32 on 24 */
  --cn-lh-subhead: 1.75rem;  /* 28 on 20 */
  --cn-lh-lede: 1.75rem;     /* 28 on 18 */
  --cn-lh-body: 1.5rem;      /* 24 on 16 */
  --cn-lh-prose: 1.75rem;    /* 28 on 16, long reading only */
  --cn-lh-ui: 1.25rem;       /* 20 on 14 and 13 */
  --cn-lh-caption: 1rem;     /* 16 on 12 */
  --cn-track-display: -0.028em;
  --cn-track-title: -0.02em;
  --cn-track-headline: -0.012em;
  --cn-track-caption: 0.02em;
  --cn-weight-regular: 400;
  --cn-weight-medium: 500;
  --cn-weight-semibold: 600;

  /* Space: a strict 4px grid. --cn-space-N is N x 4px. */
  --cn-space-1: 0.25rem;
  --cn-space-2: 0.5rem;
  --cn-space-3: 0.75rem;
  --cn-space-4: 1rem;
  --cn-space-5: 1.25rem;
  --cn-space-6: 1.5rem;
  --cn-space-8: 2rem;
  --cn-space-10: 2.5rem;
  --cn-space-12: 3rem;
  --cn-space-16: 4rem;
  --cn-space-20: 5rem;
  --cn-space-24: 6rem;

  /* Radii */
  --cn-radius-xs: 4px;       /* badges, kbd, inline code, chips */
  --cn-radius-control: 6px;  /* buttons, inputs, menu items, nav items */
  --cn-radius-panel: 8px;    /* cards, panels, tables, menus, dialogs */
  --cn-radius-round: 999px;  /* status dots, avatars, switch tracks */

  /* Sizes */
  --cn-row: 36px;            /* table rows, list rows, menu rows; 32px in compact density */
  --cn-control-h: 36px;      /* buttons and inputs */
  --cn-control-sm: 28px;
  --cn-control-lg: 44px;
  --cn-nav-h: 56px;
  --cn-topbar-h: 52px;
  --cn-sidebar-w: 248px;
  --cn-sidebar-rail: 60px;
  --cn-content: 1200px;
  --cn-narrow: 720px;
  --cn-measure: 680px;
  --cn-gutter: clamp(16px, 3.2vw, 32px);

  /* Motion: fast and quiet */
  --cn-ease: cubic-bezier(0.2, 0, 0, 1);
  --cn-dur-fast: 100ms;
  --cn-dur: 160ms;
  --cn-dur-slow: 240ms;

  /* Layers */
  --cn-z-sticky: 10;
  --cn-z-nav: 20;
  --cn-z-drawer: 40;
  --cn-z-pop: 50;
  --cn-z-toast: 60;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cn-canvas: #111314;
    --cn-panel: #171a1b;
    --cn-sidebar: #0c0e0f;
    --cn-well: #1c2021;
    --cn-raised: #1e2223;
    --cn-hover: #1d2122;
    --cn-ink: #eef1f1;
    --cn-text: #d2d8d9;
    --cn-muted: #a8b1b3;
    --cn-line: #292e30;
    --cn-line-strong: #383e40;
    --cn-control: #737d80;
    --cn-accent: #2ebfae;
    --cn-accent-text: #62d5c7;
    --cn-accent-soft: #0b2622;
    --cn-on-accent: #05110f;
    --cn-focus: #3fcabb;
    --cn-btn: #2ebfae;
    --cn-btn-hover: #55d1c2;
    --cn-btn-ink: #05110f;
    --cn-ok: #62d293;
    --cn-ok-soft: #11291b;
    --cn-ok-dot: #4cc47e;
    --cn-warn: #f0b55c;
    --cn-warn-soft: #2b210e;
    --cn-warn-dot: #e5a43a;
    --cn-danger: #ff8d81;
    --cn-danger-soft: #311613;
    --cn-danger-dot: #f0685c;
    --cn-info: #7cb6f2;
    --cn-info-soft: #112333;
    --cn-info-dot: #5c9de6;
    --cn-idle-dot: #7f8a8d;
    --cn-viz-1: #2ebfae;
    --cn-viz-2: #efb04a;
    --cn-viz-3: #5b8ad9;
    --cn-viz-4: #f59a88;
    --cn-viz-5: #a6d971;
    --cn-viz-6: #8e999d;
    --cn-seq-1: #123a35;
    --cn-seq-2: #1a5c54;
    --cn-seq-3: #23857a;
    --cn-seq-4: #39b3a4;
    --cn-seq-5: #8fe3d8;
    --cn-div-1: #f07a6c;
    --cn-div-2: #8a4038;
    --cn-div-3: #343a3c;
    --cn-div-4: #23756c;
    --cn-div-5: #59d1c2;
    --cn-tip-bg: #e6eaea;
    --cn-tip-ink: #121415;
    --cn-code-bg: #1c2021;
    --cn-code-ink: #dfe4e5;
    --cn-code-muted: #a4adaf;
    --cn-code-string: #62d293;
    --cn-code-key: #62d5c7;
    --cn-scrim: rgba(0, 0, 0, 0.6);
    --cn-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -6px rgba(0, 0, 0, 0.6);
    --cn-shadow-dialog: 0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 72px -12px rgba(0, 0, 0, 0.72);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cn-canvas: #111314;
  --cn-panel: #171a1b;
  --cn-sidebar: #0c0e0f;
  --cn-well: #1c2021;
  --cn-raised: #1e2223;
  --cn-hover: #1d2122;
  --cn-ink: #eef1f1;
  --cn-text: #d2d8d9;
  --cn-muted: #a8b1b3;
  --cn-line: #292e30;
  --cn-line-strong: #383e40;
  --cn-control: #737d80;
  --cn-accent: #2ebfae;
  --cn-accent-text: #62d5c7;
  --cn-accent-soft: #0b2622;
  --cn-on-accent: #05110f;
  --cn-focus: #3fcabb;
  --cn-btn: #2ebfae;
  --cn-btn-hover: #55d1c2;
  --cn-btn-ink: #05110f;
  --cn-ok: #62d293;
  --cn-ok-soft: #11291b;
  --cn-ok-dot: #4cc47e;
  --cn-warn: #f0b55c;
  --cn-warn-soft: #2b210e;
  --cn-warn-dot: #e5a43a;
  --cn-danger: #ff8d81;
  --cn-danger-soft: #311613;
  --cn-danger-dot: #f0685c;
  --cn-info: #7cb6f2;
  --cn-info-soft: #112333;
  --cn-info-dot: #5c9de6;
  --cn-idle-dot: #7f8a8d;
  --cn-viz-1: #2ebfae;
  --cn-viz-2: #efb04a;
  --cn-viz-3: #5b8ad9;
  --cn-viz-4: #f59a88;
  --cn-viz-5: #a6d971;
  --cn-viz-6: #8e999d;
  --cn-seq-1: #123a35;
  --cn-seq-2: #1a5c54;
  --cn-seq-3: #23857a;
  --cn-seq-4: #39b3a4;
  --cn-seq-5: #8fe3d8;
  --cn-div-1: #f07a6c;
  --cn-div-2: #8a4038;
  --cn-div-3: #343a3c;
  --cn-div-4: #23756c;
  --cn-div-5: #59d1c2;
  --cn-tip-bg: #e6eaea;
  --cn-tip-ink: #121415;
  --cn-code-bg: #1c2021;
  --cn-code-ink: #dfe4e5;
  --cn-code-muted: #a4adaf;
  --cn-code-string: #62d293;
  --cn-code-key: #62d5c7;
  --cn-scrim: rgba(0, 0, 0, 0.6);
  --cn-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -6px rgba(0, 0, 0, 0.6);
  --cn-shadow-dialog: 0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 72px -12px rgba(0, 0, 0, 0.72);
}

/* Accent preset: amber (warm signal). Accent and button tokens only. */
:root[data-accent="amber"] {
  --cn-accent: #a86200;
  --cn-accent-text: #6e4100;
  --cn-accent-soft: #fbefd8;
  --cn-on-accent: #ffffff;
  --cn-focus: #9a5a00;
  --cn-btn: #e09b1a;
  --cn-btn-hover: #c98810;
  --cn-btn-ink: #1c1303;
  --cn-night-accent: #f0b44a;
  --cn-night-accent-text: #f3c272;
  --cn-night-accent-soft: #241b0b;
  --cn-night-on-accent: #1a1203;
  --cn-night-focus: #f0b44a;
  --cn-night-btn: #f0b44a;
  --cn-night-btn-hover: #f6c66f;
  --cn-night-btn-ink: #1a1203;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="amber"]:not([data-theme="light"]) {
    --cn-accent: #f0b44a;
    --cn-accent-text: #f3c272;
    --cn-accent-soft: #241b0b;
    --cn-on-accent: #1a1203;
    --cn-focus: #f0b44a;
    --cn-btn: #f0b44a;
    --cn-btn-hover: #f6c66f;
    --cn-btn-ink: #1a1203;
    --cn-night-accent: #f0b44a;
    --cn-night-accent-text: #f3c272;
    --cn-night-accent-soft: #241b0b;
    --cn-night-on-accent: #1a1203;
    --cn-night-focus: #f0b44a;
    --cn-night-btn: #f0b44a;
    --cn-night-btn-hover: #f6c66f;
    --cn-night-btn-ink: #1a1203;
  }
}

:root[data-accent="amber"][data-theme="dark"] {
  --cn-accent: #f0b44a;
  --cn-accent-text: #f3c272;
  --cn-accent-soft: #241b0b;
  --cn-on-accent: #1a1203;
  --cn-focus: #f0b44a;
  --cn-btn: #f0b44a;
  --cn-btn-hover: #f6c66f;
  --cn-btn-ink: #1a1203;
  --cn-night-accent: #f0b44a;
  --cn-night-accent-text: #f3c272;
  --cn-night-accent-soft: #241b0b;
  --cn-night-on-accent: #1a1203;
  --cn-night-focus: #f0b44a;
  --cn-night-btn: #f0b44a;
  --cn-night-btn-hover: #f6c66f;
  --cn-night-btn-ink: #1a1203;
}

/* Accent preset: leaf (green). Accent and button tokens only. */
:root[data-accent="leaf"] {
  --cn-accent: #1c7a3f;
  --cn-accent-text: #115829;
  --cn-accent-soft: #e3f2e7;
  --cn-on-accent: #ffffff;
  --cn-focus: #1c7a3f;
  --cn-btn: #1c7a3f;
  --cn-btn-hover: #156231;
  --cn-btn-ink: #ffffff;
  --cn-night-accent: #55c47f;
  --cn-night-accent-text: #82d9a2;
  --cn-night-accent-soft: #0c2214;
  --cn-night-on-accent: #06130b;
  --cn-night-focus: #55c47f;
  --cn-night-btn: #55c47f;
  --cn-night-btn-hover: #78d59b;
  --cn-night-btn-ink: #06130b;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="leaf"]:not([data-theme="light"]) {
    --cn-accent: #55c47f;
    --cn-accent-text: #82d9a2;
    --cn-accent-soft: #0c2214;
    --cn-on-accent: #06130b;
    --cn-focus: #55c47f;
    --cn-btn: #55c47f;
    --cn-btn-hover: #78d59b;
    --cn-btn-ink: #06130b;
    --cn-night-accent: #55c47f;
    --cn-night-accent-text: #82d9a2;
    --cn-night-accent-soft: #0c2214;
    --cn-night-on-accent: #06130b;
    --cn-night-focus: #55c47f;
    --cn-night-btn: #55c47f;
    --cn-night-btn-hover: #78d59b;
    --cn-night-btn-ink: #06130b;
  }
}

:root[data-accent="leaf"][data-theme="dark"] {
  --cn-accent: #55c47f;
  --cn-accent-text: #82d9a2;
  --cn-accent-soft: #0c2214;
  --cn-on-accent: #06130b;
  --cn-focus: #55c47f;
  --cn-btn: #55c47f;
  --cn-btn-hover: #78d59b;
  --cn-btn-ink: #06130b;
  --cn-night-accent: #55c47f;
  --cn-night-accent-text: #82d9a2;
  --cn-night-accent-soft: #0c2214;
  --cn-night-on-accent: #06130b;
  --cn-night-focus: #55c47f;
  --cn-night-btn: #55c47f;
  --cn-night-btn-hover: #78d59b;
  --cn-night-btn-ink: #06130b;
}