/*! Core Support design system 1.0.0 (2026-10-24). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless <html> carries
   data-theme="light" or data-theme="dark". Any element with data-theme="light" or
   data-theme="dark" (for example the wp-admin shell) pins its own subtree to that theme. */

:root {
  color-scheme: light;
  --csx-show-light: inline-flex;  /* theme-only elements, e.g. the toggle's moon */
  --csx-show-dark: none;

  /* Surfaces: cool gray canvas, white surfaces, a subtle tint for wells and table heads */
  --csx-canvas: #f5f7fa;
  --csx-surface: #ffffff;
  --csx-subtle: #f1f4f8;
  --csx-code-bg: #f1f4f8;

  /* Text */
  --csx-ink: #182433;
  --csx-body: #2b3646;
  --csx-muted: #435064;

  /* Lines */
  --csx-line: #e1e6ec;
  --csx-line-strong: #cbd2db;
  --csx-line-control: #778296;

  /* Accent: Tabler blue */
  --csx-accent: #066fd1;
  --csx-accent-soft: #e8f1fb;
  --csx-on-accent: #ffffff;
  --csx-link: #054c94;
  --csx-link-hover: #182433;

  /* Primary button (same blue in both themes) */
  --csx-btn: #066fd1;
  --csx-btn-hover: #0559a8;
  --csx-btn-ink: #ffffff;

  /* Status: dots are decorative and always sit next to words; inks carry the text */
  --csx-ok: #2fb344;
  --csx-ok-ink: #145a24;
  --csx-ok-soft: #e6f5e9;
  --csx-ok-line: #bfe3c6;
  --csx-warn: #f59f00;
  --csx-warn-ink: #6b4500;
  --csx-warn-soft: #fdf3e1;
  --csx-warn-line: #f0d6a2;
  --csx-danger: #d63939;
  --csx-danger-ink: #902020;
  --csx-danger-soft: #fbeaea;
  --csx-danger-line: #f0c2c2;
  --csx-info-ink: #054c94;
  --csx-info-soft: #e8f1fb;
  --csx-info-line: #bcd5f1;

  /* Code */
  --csx-code-ink: #1f2b3b;
  --csx-code-comment: #465366;
  --csx-code-string: #145a24;
  --csx-code-keyword: #054c94;
  --csx-code-name: #8a2c0d;

  /* Focus */
  --csx-focus: #066fd1;

  /* Elevation: one soft card shadow, a menu shadow, nothing else */
  --csx-shadow-card: 0 1px 2px 0 rgba(24, 36, 51, 0.05);
  --csx-shadow-input: 0 1px 1px 0 rgba(24, 36, 51, 0.04);
  --csx-shadow-menu: 0 16px 32px -12px rgba(24, 36, 51, 0.28);
  --csx-shadow-bar: 0 -8px 24px -16px rgba(24, 36, 51, 0.35);

  /* Type */
  --csx-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --csx-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --csx-font-features: "cv03", "cv04", "cv11";
  --csx-fs-display: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);  /* 32 to 44: portal hero */
  --csx-fs-1: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);      /* 28 to 36: page titles */
  --csx-fs-2: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);     /* 22 to 26: section titles */
  --csx-fs-3: 1.25rem;                                        /* 20: admin page title, release */
  --csx-fs-4: 1.125rem;                                       /* 18: card and article h3 */
  --csx-fs-5: 1rem;                                           /* 16: body, admin card titles */
  --csx-fs-6: 0.875rem;                                       /* 14: controls, tables, admin text */
  --csx-fs-7: 0.8125rem;                                      /* 13: meta lines, breadcrumbs */
  --csx-fs-8: 0.75rem;                                        /* 12: badges, table heads, captions */
  --csx-fs-lede: 1.125rem;                                    /* 18: hero and page ledes */
  --csx-fs-prose-sm: 0.875rem;                                /* 14: supporting prose; 16 on phones */
  --csx-lh-tight: 1.15;
  --csx-lh-heading: 1.3;
  --csx-lh-ui: 1.43;
  --csx-lh-body: 1.6;
  --csx-lh-prose: 1.7;
  --csx-track-display: -0.022em;
  --csx-track-heading: -0.012em;
  --csx-track-caps: 0.04em;
  --csx-weight-regular: 400;
  --csx-weight-medium: 500;
  --csx-weight-semibold: 600;

  /* Space: 4px base */
  --csx-space-1: 4px;
  --csx-space-2: 8px;
  --csx-space-3: 12px;
  --csx-space-4: 16px;
  --csx-space-5: 20px;
  --csx-space-6: 24px;
  --csx-space-7: 32px;
  --csx-space-8: 40px;
  --csx-space-9: 48px;
  --csx-space-10: 64px;
  --csx-section-pad: clamp(2.5rem, 1.75rem + 3vw, 4rem);     /* 40 to 64 */

  /* Shape */
  --csx-radius-sm: 4px;
  --csx-radius: 6px;
  --csx-radius-lg: 8px;
  --csx-radius-pill: 999px;

  /* Controls */
  --csx-control-h: 2.25rem;     /* 36 */
  --csx-control-h-sm: 1.875rem; /* 30 */
  --csx-control-h-lg: 2.75rem;  /* 44 */
  --csx-target: 44px;

  /* Layout */
  --csx-content: 1200px;
  --csx-wide: 1360px;
  --csx-narrow: 760px;
  --csx-admin-max: 1280px;
  --csx-gutter: 24px;
  --csx-nav-h: 60px;
  --csx-docs-nav: 248px;
  --csx-docs-toc: 208px;

  /* Motion */
  --csx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --csx-dur-fast: 120ms;
  --csx-dur: 180ms;
}

/* Phones: UI text and supporting prose grow to 16px, so labels never sit smaller than their help
   text and inputs don't trigger a zoom on focus in mobile browsers */
@media (max-width: 640px) {
  :root {
    --csx-gutter: 16px;
    --csx-fs-6: 1rem;
    --csx-fs-prose-sm: 1rem;
  }
}

/* A subtree pinned to light, inside a dark page (wp-admin shells default to this) */
[data-theme="light"] {
  color-scheme: light;
  --csx-show-light: inline-flex;  /* theme-only elements, e.g. the toggle's moon */
  --csx-show-dark: none;
  --csx-canvas: #f5f7fa;
  --csx-surface: #ffffff;
  --csx-subtle: #f1f4f8;
  --csx-code-bg: #f1f4f8;
  --csx-ink: #182433;
  --csx-body: #2b3646;
  --csx-muted: #435064;
  --csx-line: #e1e6ec;
  --csx-line-strong: #cbd2db;
  --csx-line-control: #778296;
  --csx-accent: #066fd1;
  --csx-accent-soft: #e8f1fb;
  --csx-on-accent: #ffffff;
  --csx-link: #054c94;
  --csx-link-hover: #182433;
  --csx-ok-ink: #145a24;
  --csx-ok-soft: #e6f5e9;
  --csx-ok-line: #bfe3c6;
  --csx-warn-ink: #6b4500;
  --csx-warn-soft: #fdf3e1;
  --csx-warn-line: #f0d6a2;
  --csx-danger-ink: #902020;
  --csx-danger-soft: #fbeaea;
  --csx-danger-line: #f0c2c2;
  --csx-info-ink: #054c94;
  --csx-info-soft: #e8f1fb;
  --csx-info-line: #bcd5f1;
  --csx-code-ink: #1f2b3b;
  --csx-code-comment: #465366;
  --csx-code-string: #145a24;
  --csx-code-keyword: #054c94;
  --csx-code-name: #8a2c0d;
  --csx-focus: #066fd1;
  --csx-shadow-card: 0 1px 2px 0 rgba(24, 36, 51, 0.05);
  --csx-shadow-input: 0 1px 1px 0 rgba(24, 36, 51, 0.04);
  --csx-shadow-menu: 0 16px 32px -12px rgba(24, 36, 51, 0.28);
  --csx-shadow-bar: 0 -8px 24px -16px rgba(24, 36, 51, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --csx-show-light: none;
    --csx-show-dark: inline-flex;
    --csx-canvas: #111822;
    --csx-surface: #182230;
    --csx-subtle: #1f2a3a;
    --csx-code-bg: #0d131c;
    --csx-ink: #f1f4f8;
    --csx-body: #d0d7e1;
    --csx-muted: #afbac8;
    --csx-line: #2a3546;
    --csx-line-strong: #3a4658;
    --csx-line-control: #6c788b;
    --csx-accent: #3d8fe6;
    --csx-accent-soft: #13284a;
    --csx-on-accent: #ffffff;
    --csx-link: #90bff2;
    --csx-link-hover: #f1f4f8;
    --csx-ok-ink: #86d896;
    --csx-ok-soft: #132c1b;
    --csx-ok-line: #285c36;
    --csx-warn-ink: #f0c25c;
    --csx-warn-soft: #30260c;
    --csx-warn-line: #6b5218;
    --csx-danger-ink: #f4a3a3;
    --csx-danger-soft: #381a1c;
    --csx-danger-line: #6e3033;
    --csx-info-ink: #90bff2;
    --csx-info-soft: #13284a;
    --csx-info-line: #24497a;
    --csx-code-ink: #dfe5ee;
    --csx-code-comment: #a3afbf;
    --csx-code-string: #86d896;
    --csx-code-keyword: #90bff2;
    --csx-code-name: #f5b48c;
    --csx-focus: #4f9be8;
    --csx-shadow-card: none;
    --csx-shadow-input: none;
    --csx-shadow-menu: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
    --csx-shadow-bar: 0 -8px 24px -16px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --csx-show-light: none;
  --csx-show-dark: inline-flex;
  --csx-canvas: #111822;
  --csx-surface: #182230;
  --csx-subtle: #1f2a3a;
  --csx-code-bg: #0d131c;
  --csx-ink: #f1f4f8;
  --csx-body: #d0d7e1;
  --csx-muted: #afbac8;
  --csx-line: #2a3546;
  --csx-line-strong: #3a4658;
  --csx-line-control: #6c788b;
  --csx-accent: #3d8fe6;
  --csx-accent-soft: #13284a;
  --csx-on-accent: #ffffff;
  --csx-link: #90bff2;
  --csx-link-hover: #f1f4f8;
  --csx-ok-ink: #86d896;
  --csx-ok-soft: #132c1b;
  --csx-ok-line: #285c36;
  --csx-warn-ink: #f0c25c;
  --csx-warn-soft: #30260c;
  --csx-warn-line: #6b5218;
  --csx-danger-ink: #f4a3a3;
  --csx-danger-soft: #381a1c;
  --csx-danger-line: #6e3033;
  --csx-info-ink: #90bff2;
  --csx-info-soft: #13284a;
  --csx-info-line: #24497a;
  --csx-code-ink: #dfe5ee;
  --csx-code-comment: #a3afbf;
  --csx-code-string: #86d896;
  --csx-code-keyword: #90bff2;
  --csx-code-name: #f5b48c;
  --csx-focus: #4f9be8;
  --csx-shadow-card: none;
  --csx-shadow-input: none;
  --csx-shadow-menu: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  --csx-shadow-bar: 0 -8px 24px -16px rgba(0, 0, 0, 0.7);
}