/* dx design tokens, Daedelix brand (brand-kit/colors.md, type.md).
   Custom properties inherit through Shadow DOM, so every dx-* element picks
   these up. Override any token on :root or a subtree to rebrand.

   Theme
   - Dark is the default (the brand is dark-first): no attribute = dark.
   - data-theme="light" | "dark" forces a theme on <html> or any subtree.
   - data-theme="system" follows prefers-color-scheme.

   Fonts
   - Lato (display), Open Sans (body), JetBrains Mono (data) load from the one
     Google Fonts stylesheet imported below. Sandboxed / CSP-restricted views
     must allow https://fonts.googleapis.com (style-src) and
     https://fonts.gstatic.com (font-src); if blocked, the stacks fall back to
     system faces and nothing else breaks.

   Deviations from the brand palette (each needed for WCAG AA, see test/tokens.test.js)
   - dark --dx-color-text-subtle is #848aa0, not brand Text Muted #5c6278
     (3.0:1 on Base); it is used for placeholders, which must reach 4.5:1.
   - light --dx-color-accent is #a85300: Brand Orange #fb8500 is 2.5:1 on white,
     so the light theme darkens it until accent text (links, tabs, ghost buttons)
     reaches 4.5:1 on every light surface. Dark keeps #fb8500 unchanged.
   - light semantic colors are darker steps of the brand danger/success/warn
     hues for the same reason.

   Charts: slot 1 is Brand Orange (light: #d36a00 for 3:1 on light surfaces),
   then blue, rose, olive, violet, green. Validated with the dataviz palette
   checker (adjacent pairs): CVD dE >= 8.9, normal-vision dE >= 21, every slot
   >= 3:1 on bg/surface/surface-2. Known exception: dark slot 1 (#fb8500) sits
   above the dark lightness band (L 0.73); kept because it is the brand mark. */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Open+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* dark (default) */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  /* color: surfaces + text (brand dark UI scale) */
  --dx-color-bg: #0d0e10;
  --dx-color-surface: #13151a;
  --dx-color-surface-2: #191c23;
  --dx-color-surface-3: #1e2229;
  --dx-color-border: #252830;
  --dx-color-border-strong: #2e3340;
  --dx-color-text: #e8eaf0;
  --dx-color-text-muted: #9aa0b4;
  --dx-color-text-subtle: #848aa0;
  --dx-color-text-inverse: #0d0e10;

  /* color: intent. Brand Orange is a spark: fills on small controls only. */
  --dx-color-accent: #fb8500;
  --dx-color-accent-hover: #e67700;
  --dx-color-accent-soft: rgba(251, 133, 0, 0.15);
  --dx-color-on-accent: #0d0e10;
  --dx-color-danger: #e5534b;
  --dx-color-danger-hover: #ec6b63;
  --dx-color-danger-soft: rgba(229, 83, 75, 0.08);
  --dx-color-success: #3fb950;
  --dx-color-success-soft: rgba(63, 185, 80, 0.15);
  --dx-color-warning: #d29922;
  --dx-color-warning-soft: rgba(210, 153, 34, 0.15);
  --dx-color-focus: #fb8500;

  /* color: charts. Brand Orange first, then a CVD-checked set (see header). */
  --dx-chart-1: #fb8500;
  --dx-chart-2: #3d8fe0;
  --dx-chart-3: #d4607a;
  --dx-chart-4: #9a9a2a;
  --dx-chart-5: #b072d6;
  --dx-chart-6: #22a07a;
  --dx-chart-grid: #252830;
  --dx-chart-axis: #9aa0b4;

  /* elevation */
  --dx-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --dx-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
  --dx-shadow-3: 0 12px 32px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
  /* glass + light (the "lit from within" layer, web/src/ui/foundation.css documents use) */
  --dx-glass-bg: rgba(25, 28, 35, 0.72);
  --dx-glass-bg-strong: rgba(19, 21, 26, 0.9);
  --dx-glass-highlight: rgba(255, 255, 255, 0.07);
  --dx-glass-edge: rgba(255, 255, 255, 0.05);
  --dx-glass-hover: rgba(255, 255, 255, 0.04);
  --dx-glow-accent: rgba(251, 133, 0, 0.25);
  --dx-glow-accent-strong: rgba(251, 133, 0, 0.45);
  --dx-accent-gradient: linear-gradient(180deg, #ff9a1f 0%, #fb8500 100%);
  --dx-accent-gradient-hover: linear-gradient(180deg, #ffa53a 0%, #fb8500 100%);
  --dx-ambient-warm: rgba(251, 133, 0, 0.09);
  --dx-ambient-ember: rgba(230, 119, 0, 0.05);
  --dx-ambient-cool: rgba(120, 140, 180, 0.06);
  --dx-grain-opacity: 0.035;
  --dx-scrim: rgba(5, 6, 8, 0.55);
  --dx-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.3);
  --dx-shadow-float: 0 18px 50px -12px rgb(0 0 0 / 0.75), 0 4px 14px rgb(0 0 0 / 0.4);
  /* kit surfaces (design pass 3): generated views sit on the host's glass card, so the kit's own
  surfaces are tinted glass over it, hairlines are light, and orange stays a spark. */
  --dx-surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  --dx-surface-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  --dx-surface-sunken: rgba(0, 0, 0, 0.22);
  --dx-fill-1: rgba(255, 255, 255, 0.05);
  --dx-fill-2: rgba(255, 255, 255, 0.09);
  --dx-fill-3: rgba(255, 255, 255, 0.14);
  --dx-hairline: rgba(255, 255, 255, 0.08);
  --dx-hairline-strong: rgba(255, 255, 255, 0.15);
  --dx-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px -22px rgb(0 0 0 / 0.75);
  --dx-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 44px -22px rgb(0 0 0 / 0.85);
  --dx-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgb(0 0 0 / 0.3);
  --dx-ring-gap: #15171c;
  --dx-chart-neutral: #3a4254;
  --dx-chart-neutral-top: #59637a;
  --dx-chart-spark: #fb8500;
  --dx-chart-spark-top: #ffb24d;
  --dx-on-media: #f4f5f8;
}

/* light: forced */
[data-theme='light'] {
  color-scheme: light;

  /* color: surfaces + text (clean white + charcoal, per colors.md) */
  --dx-color-bg: #f6f7f9;
  --dx-color-surface: #ffffff;
  --dx-color-surface-2: #eef0f3;
  --dx-color-surface-3: #e4e7ec;
  --dx-color-border: #dde0e6;
  --dx-color-border-strong: #b4b9c4;
  --dx-color-text: #232323;
  --dx-color-text-muted: #545a69;
  --dx-color-text-subtle: #5f6576;
  --dx-color-text-inverse: #ffffff;

  /* color: intent. Accent is Brand Orange darkened for AA text on white. */
  --dx-color-accent: #a85300;
  --dx-color-accent-hover: #8f4600;
  --dx-color-accent-soft: rgba(251, 133, 0, 0.12);
  --dx-color-on-accent: #ffffff;
  --dx-color-danger: #b42d24;
  --dx-color-danger-hover: #96241c;
  --dx-color-danger-soft: rgba(229, 83, 75, 0.12);
  --dx-color-success: #1f7a4d;
  --dx-color-success-soft: rgba(63, 185, 80, 0.14);
  --dx-color-warning: #8a5a00;
  --dx-color-warning-soft: rgba(210, 153, 34, 0.16);
  --dx-color-focus: #a85300;

  /* color: charts. Same hue order as dark, stepped for a white surface. */
  --dx-chart-1: #d36a00;
  --dx-chart-2: #2f6fd0;
  --dx-chart-3: #b8486a;
  --dx-chart-4: #7a7a00;
  --dx-chart-5: #8a55c0;
  --dx-chart-6: #138a64;
  --dx-chart-grid: #e4e7ec;
  --dx-chart-axis: #545a69;

  /* elevation */
  --dx-shadow-1: 0 1px 2px rgb(13 14 16 / 0.06), 0 1px 1px rgb(13 14 16 / 0.04);
  --dx-shadow-2: 0 4px 12px rgb(13 14 16 / 0.08), 0 1px 3px rgb(13 14 16 / 0.06);
  --dx-shadow-3: 0 12px 32px rgb(13 14 16 / 0.12), 0 2px 6px rgb(13 14 16 / 0.08);
  /* glass + light (the "lit from within" layer, web/src/ui/foundation.css documents use) */
  --dx-glass-bg: rgba(255, 255, 255, 0.74);
  --dx-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --dx-glass-highlight: rgba(255, 255, 255, 0.9);
  --dx-glass-edge: rgba(13, 14, 16, 0.08);
  --dx-glass-hover: rgba(13, 14, 16, 0.04);
  --dx-glow-accent: rgba(251, 133, 0, 0.22);
  --dx-glow-accent-strong: rgba(251, 133, 0, 0.38);
  --dx-accent-gradient: linear-gradient(180deg, #b85c00 0%, #a85300 100%);
  --dx-accent-gradient-hover: linear-gradient(180deg, #a85300 0%, #8f4600 100%);
  --dx-ambient-warm: rgba(251, 133, 0, 0.1);
  --dx-ambient-ember: rgba(230, 119, 0, 0.06);
  --dx-ambient-cool: rgba(120, 140, 180, 0.12);
  --dx-grain-opacity: 0.025;
  --dx-scrim: rgba(13, 14, 16, 0.28);
  --dx-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 40px -18px rgb(13 14 16 / 0.18), 0 2px 6px rgb(13 14 16 / 0.06);
  --dx-shadow-float: 0 18px 44px -14px rgb(13 14 16 / 0.25), 0 4px 12px rgb(13 14 16 / 0.08);
  /* kit surfaces (design pass 3): generated views sit on the host's glass card, so the kit's own
  surfaces are tinted glass over it, hairlines are light, and orange stays a spark. */
  --dx-surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
  --dx-surface-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.84));
  --dx-surface-sunken: rgba(13, 14, 16, 0.04);
  --dx-fill-1: rgba(13, 14, 16, 0.045);
  --dx-fill-2: rgba(13, 14, 16, 0.08);
  --dx-fill-3: rgba(13, 14, 16, 0.13);
  --dx-hairline: rgba(13, 14, 16, 0.09);
  --dx-hairline-strong: rgba(13, 14, 16, 0.17);
  --dx-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -20px rgb(13 14 16 / 0.22);
  --dx-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -20px rgb(13 14 16 / 0.3);
  --dx-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgb(13 14 16 / 0.18);
  --dx-ring-gap: #f6f7f9;
  --dx-chart-neutral: #c4c9d3;
  --dx-chart-neutral-top: #a3aab8;
  --dx-chart-spark: #d36a00;
  --dx-chart-spark-top: #f08a1c;
  --dx-on-media: #f4f5f8;
}

/* following the OS, opt-in via data-theme="system" */
@media (prefers-color-scheme: dark) {
  [data-theme='system'] {
    color-scheme: dark;

    /* color: surfaces + text (brand dark UI scale) */
    --dx-color-bg: #0d0e10;
    --dx-color-surface: #13151a;
    --dx-color-surface-2: #191c23;
    --dx-color-surface-3: #1e2229;
    --dx-color-border: #252830;
    --dx-color-border-strong: #2e3340;
    --dx-color-text: #e8eaf0;
    --dx-color-text-muted: #9aa0b4;
    --dx-color-text-subtle: #848aa0;
    --dx-color-text-inverse: #0d0e10;

    /* color: intent. Brand Orange is a spark: fills on small controls only. */
    --dx-color-accent: #fb8500;
    --dx-color-accent-hover: #e67700;
    --dx-color-accent-soft: rgba(251, 133, 0, 0.15);
    --dx-color-on-accent: #0d0e10;
    --dx-color-danger: #e5534b;
    --dx-color-danger-hover: #ec6b63;
    --dx-color-danger-soft: rgba(229, 83, 75, 0.08);
    --dx-color-success: #3fb950;
    --dx-color-success-soft: rgba(63, 185, 80, 0.15);
    --dx-color-warning: #d29922;
    --dx-color-warning-soft: rgba(210, 153, 34, 0.15);
    --dx-color-focus: #fb8500;

    /* color: charts. Brand Orange first, then a CVD-checked set (see header). */
    --dx-chart-1: #fb8500;
    --dx-chart-2: #3d8fe0;
    --dx-chart-3: #d4607a;
    --dx-chart-4: #9a9a2a;
    --dx-chart-5: #b072d6;
    --dx-chart-6: #22a07a;
    --dx-chart-grid: #252830;
    --dx-chart-axis: #9aa0b4;

    /* elevation */
    --dx-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --dx-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.3);
    --dx-shadow-3: 0 12px 32px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.35);
    /* glass + light (the "lit from within" layer, web/src/ui/foundation.css documents use) */
    --dx-glass-bg: rgba(25, 28, 35, 0.72);
    --dx-glass-bg-strong: rgba(19, 21, 26, 0.9);
    --dx-glass-highlight: rgba(255, 255, 255, 0.07);
    --dx-glass-edge: rgba(255, 255, 255, 0.05);
    --dx-glass-hover: rgba(255, 255, 255, 0.04);
    --dx-glow-accent: rgba(251, 133, 0, 0.25);
    --dx-glow-accent-strong: rgba(251, 133, 0, 0.45);
    --dx-accent-gradient: linear-gradient(180deg, #ff9a1f 0%, #fb8500 100%);
    --dx-accent-gradient-hover: linear-gradient(180deg, #ffa53a 0%, #fb8500 100%);
    --dx-ambient-warm: rgba(251, 133, 0, 0.09);
    --dx-ambient-ember: rgba(230, 119, 0, 0.05);
    --dx-ambient-cool: rgba(120, 140, 180, 0.06);
    --dx-grain-opacity: 0.035;
    --dx-scrim: rgba(5, 6, 8, 0.55);
    --dx-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.3);
    --dx-shadow-float: 0 18px 50px -12px rgb(0 0 0 / 0.75), 0 4px 14px rgb(0 0 0 / 0.4);
    /* kit surfaces (design pass 3): generated views sit on the host's glass card, so the kit's own
    surfaces are tinted glass over it, hairlines are light, and orange stays a spark. */
    --dx-surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    --dx-surface-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    --dx-surface-sunken: rgba(0, 0, 0, 0.22);
    --dx-fill-1: rgba(255, 255, 255, 0.05);
    --dx-fill-2: rgba(255, 255, 255, 0.09);
    --dx-fill-3: rgba(255, 255, 255, 0.14);
    --dx-hairline: rgba(255, 255, 255, 0.08);
    --dx-hairline-strong: rgba(255, 255, 255, 0.15);
    --dx-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px -22px rgb(0 0 0 / 0.75);
    --dx-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 44px -22px rgb(0 0 0 / 0.85);
    --dx-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgb(0 0 0 / 0.3);
    --dx-ring-gap: #15171c;
    --dx-chart-neutral: #3a4254;
    --dx-chart-neutral-top: #59637a;
    --dx-chart-spark: #fb8500;
    --dx-chart-spark-top: #ffb24d;
    --dx-on-media: #f4f5f8;
  }
}

@media (prefers-color-scheme: light) {
  [data-theme='system'] {
    color-scheme: light;

    /* color: surfaces + text (clean white + charcoal, per colors.md) */
    --dx-color-bg: #f6f7f9;
    --dx-color-surface: #ffffff;
    --dx-color-surface-2: #eef0f3;
    --dx-color-surface-3: #e4e7ec;
    --dx-color-border: #dde0e6;
    --dx-color-border-strong: #b4b9c4;
    --dx-color-text: #232323;
    --dx-color-text-muted: #545a69;
    --dx-color-text-subtle: #5f6576;
    --dx-color-text-inverse: #ffffff;

    /* color: intent. Accent is Brand Orange darkened for AA text on white. */
    --dx-color-accent: #a85300;
    --dx-color-accent-hover: #8f4600;
    --dx-color-accent-soft: rgba(251, 133, 0, 0.12);
    --dx-color-on-accent: #ffffff;
    --dx-color-danger: #b42d24;
    --dx-color-danger-hover: #96241c;
    --dx-color-danger-soft: rgba(229, 83, 75, 0.12);
    --dx-color-success: #1f7a4d;
    --dx-color-success-soft: rgba(63, 185, 80, 0.14);
    --dx-color-warning: #8a5a00;
    --dx-color-warning-soft: rgba(210, 153, 34, 0.16);
    --dx-color-focus: #a85300;

    /* color: charts. Same hue order as dark, stepped for a white surface. */
    --dx-chart-1: #d36a00;
    --dx-chart-2: #2f6fd0;
    --dx-chart-3: #b8486a;
    --dx-chart-4: #7a7a00;
    --dx-chart-5: #8a55c0;
    --dx-chart-6: #138a64;
    --dx-chart-grid: #e4e7ec;
    --dx-chart-axis: #545a69;

    /* elevation */
    --dx-shadow-1: 0 1px 2px rgb(13 14 16 / 0.06), 0 1px 1px rgb(13 14 16 / 0.04);
    --dx-shadow-2: 0 4px 12px rgb(13 14 16 / 0.08), 0 1px 3px rgb(13 14 16 / 0.06);
    --dx-shadow-3: 0 12px 32px rgb(13 14 16 / 0.12), 0 2px 6px rgb(13 14 16 / 0.08);
    /* glass + light (the "lit from within" layer, web/src/ui/foundation.css documents use) */
    --dx-glass-bg: rgba(255, 255, 255, 0.74);
    --dx-glass-bg-strong: rgba(255, 255, 255, 0.92);
    --dx-glass-highlight: rgba(255, 255, 255, 0.9);
    --dx-glass-edge: rgba(13, 14, 16, 0.08);
    --dx-glass-hover: rgba(13, 14, 16, 0.04);
    --dx-glow-accent: rgba(251, 133, 0, 0.22);
    --dx-glow-accent-strong: rgba(251, 133, 0, 0.38);
    --dx-accent-gradient: linear-gradient(180deg, #b85c00 0%, #a85300 100%);
    --dx-accent-gradient-hover: linear-gradient(180deg, #a85300 0%, #8f4600 100%);
    --dx-ambient-warm: rgba(251, 133, 0, 0.1);
    --dx-ambient-ember: rgba(230, 119, 0, 0.06);
    --dx-ambient-cool: rgba(120, 140, 180, 0.12);
    --dx-grain-opacity: 0.025;
    --dx-scrim: rgba(13, 14, 16, 0.28);
    --dx-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 20px 40px -18px rgb(13 14 16 / 0.18), 0 2px 6px rgb(13 14 16 / 0.06);
    --dx-shadow-float: 0 18px 44px -14px rgb(13 14 16 / 0.25), 0 4px 12px rgb(13 14 16 / 0.08);
    /* kit surfaces (design pass 3): generated views sit on the host's glass card, so the kit's own
    surfaces are tinted glass over it, hairlines are light, and orange stays a spark. */
    --dx-surface-card: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
    --dx-surface-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.84));
    --dx-surface-sunken: rgba(13, 14, 16, 0.04);
    --dx-fill-1: rgba(13, 14, 16, 0.045);
    --dx-fill-2: rgba(13, 14, 16, 0.08);
    --dx-fill-3: rgba(13, 14, 16, 0.13);
    --dx-hairline: rgba(13, 14, 16, 0.09);
    --dx-hairline-strong: rgba(13, 14, 16, 0.17);
    --dx-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -20px rgb(13 14 16 / 0.22);
    --dx-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -20px rgb(13 14 16 / 0.3);
    --dx-shadow-button: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgb(13 14 16 / 0.18);
    --dx-ring-gap: #f6f7f9;
    --dx-chart-neutral: #c4c9d3;
    --dx-chart-neutral-top: #a3aab8;
    --dx-chart-spark: #d36a00;
    --dx-chart-spark-top: #f08a1c;
    --dx-on-media: #f4f5f8;
  }
}

:root {
  /* typography (rem-based so browser text scaling applies) */
  --dx-font-display: 'Lato', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --dx-font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --dx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --dx-text-xs: 0.75rem;
  --dx-text-sm: 0.875rem;
  --dx-text-md: 1rem;
  --dx-text-lg: 1.125rem;
  --dx-text-xl: 1.375rem;
  --dx-text-2xl: 1.75rem;
  --dx-text-3xl: 2.25rem;
  --dx-leading-tight: 1.2;
  --dx-leading-normal: 1.5;
  --dx-weight-regular: 400;
  --dx-weight-medium: 500;
  --dx-weight-semibold: 600;
  --dx-weight-bold: 700;
  --dx-weight-display: 700;

  /* spacing scale: 0..8 */
  --dx-space-0: 0;
  --dx-space-1: 0.25rem;
  --dx-space-2: 0.5rem;
  --dx-space-3: 0.75rem;
  --dx-space-4: 1rem;
  --dx-space-5: 1.5rem;
  --dx-space-6: 2rem;
  --dx-space-7: 3rem;
  --dx-space-8: 4rem;

  /* radius */
  --dx-radius-sm: 4px;
  --dx-radius-md: 8px;
  --dx-radius-lg: 12px;
  --dx-radius-full: 999px;

  /* sizing */
  --dx-control-height: 2.75rem; /* 44px, the same as a button: a field and a button in one row line up */
  --dx-target-min: 44px;
  --dx-focus-ring: 0 0 0 2px var(--dx-color-surface), 0 0 0 4px var(--dx-color-focus);
  /* A text field's focus (product.md, Inputs): the field's own border turns orange and a soft halo
     surrounds it. One treatment: never pair it with --dx-focus-ring or an outline on the same field. */
  --dx-focus-field: 0 0 0 4px var(--dx-glow-accent);

  /* motion */
  --dx-duration-fast: 120ms;
  --dx-duration-normal: 200ms;
  --dx-duration-slow: 320ms;
  --dx-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dx-duration-fast: 0ms;
    --dx-duration-normal: 0ms;
    --dx-duration-slow: 0ms;
  }
}

/* motion + editorial scale (golden views, PRIMITIVES.md section 2).
   data-motion="reduce" on <html> or any subtree is an in-app reduced-motion switch:
   it zeroes the durations exactly like the OS setting and kit elements read it too. */
:root {
  --dx-duration-slower: 520ms;
  --dx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dx-text-4xl: clamp(1.9rem, 6vw, 2.75rem);
  --dx-text-hero: clamp(2.4rem, 8.5vw, 4.25rem);
  --dx-weight-black: 900;
  --dx-weight-light: 300;
  --dx-radius-xl: 18px;

  /* foundation (web/src/ui/foundation.css): spring motion, glass blur, larger radii, display scale */
  --dx-radius-2xl: 24px;
  --dx-radius-sheet: 28px;
  --dx-ease-spring-soft: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --dx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dx-duration-fade: 180ms;
  --dx-duration-spring: 380ms;
  --dx-duration-breathe: 2400ms;
  --dx-duration-drift: 80s;
  --dx-blur-glass: 24px;
  --dx-text-display: clamp(2rem, 4.6vw, 3rem);
  --dx-tracking-display: -0.025em;
  --dx-composer-max: 46rem;
  --dx-highlight-on-accent: rgba(255, 255, 255, 0.32);
  --dx-highlight-on-accent-strong: rgba(255, 255, 255, 0.4);
  --dx-ember-core: #ffe2b8;
  --dx-switch-thumb: #ffffff;
  --dx-shadow-press: 0 1px 2px rgb(0 0 0 / 0.25);
  --dx-shadow-raised: 0 1px 4px rgb(0 0 0 / 0.3);
  --dx-shadow-thumb: 0 2px 6px rgb(0 0 0 / 0.35);
  --dx-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.25);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dx-duration-slower: 0ms;
    --dx-duration-spring: 0ms;
  }
}

[data-motion='reduce'] {
  --dx-duration-fast: 0ms;
  --dx-duration-normal: 0ms;
  --dx-duration-slow: 0ms;
  --dx-duration-slower: 0ms;
  --dx-duration-spring: 0ms;
}

/* Light-DOM baseline for pages that use the kit. */
html {
  background: var(--dx-color-bg);
  color: var(--dx-color-text);
  font-family: var(--dx-font-sans);
  font-size: 100%;
  line-height: var(--dx-leading-normal);
}

:where(h1, h2, h3, h4) {
  font-family: var(--dx-font-display);
  font-weight: var(--dx-weight-display);
  text-wrap: balance;
}

/* Page building blocks for generated views (design pass 3). A view runs in a sandboxed frame that
   only gets this file and the kit, so the look lives here: Lato black for the answer, JetBrains Mono
   for numbers and meta, glass for the few things you act on, hairline rules between quiet sections,
   orange only as a spark. Every rule has zero-specificity fallbacks a view's own <style> can override. */
.dx-kicker {
  font-family: var(--dx-font-mono);
  font-size: var(--dx-text-xs);
  letter-spacing: 0.04em;
  color: var(--dx-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.dx-answer {
  margin: 0;
  font-family: var(--dx-font-display);
  font-weight: var(--dx-weight-black);
  font-size: var(--dx-text-4xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.dx-answer.hero { font-size: var(--dx-text-hero); }
.dx-answer :is(b, strong, em) { color: var(--dx-color-accent); font-style: normal; font-weight: inherit; }
.dx-why {
  margin: var(--dx-space-2) 0 var(--dx-space-5);
  max-width: 60ch;
  color: var(--dx-color-text-muted);
}
.dx-sec {
  display: grid;
  gap: var(--dx-space-3);
  margin-top: var(--dx-space-7);
  padding-top: var(--dx-space-4);
  border-top: 1px solid var(--dx-hairline);
}
.dx-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--dx-space-1) var(--dx-space-3);
}
.dx-head > :first-child {
  margin: 0;
  font-family: var(--dx-font-display);
  font-weight: var(--dx-weight-bold);
  font-size: var(--dx-text-lg);
  letter-spacing: -0.01em;
}
.dx-meta {
  font-family: var(--dx-font-mono);
  font-size: var(--dx-text-xs);
  color: var(--dx-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.dx-num {
  font-family: var(--dx-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dx-glass {
  padding: var(--dx-space-4);
  border: 1px solid var(--dx-hairline);
  border-radius: var(--dx-radius-xl);
  background: var(--dx-surface-card);
  box-shadow: var(--dx-shadow-card);
}
.dx-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dx-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dx-space-3);
  min-height: var(--dx-target-min);
  padding: var(--dx-space-3) var(--dx-space-2);
  border-radius: var(--dx-radius-md);
  transition: background var(--dx-duration-fast) var(--dx-ease);
}
.dx-row + .dx-row { border-top: 1px solid var(--dx-hairline); }
.dx-row:hover { background: var(--dx-fill-1); }
.dx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dx-space-1);
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--dx-hairline);
  border-radius: var(--dx-radius-full);
  background: var(--dx-fill-1);
  color: var(--dx-color-text-muted);
  font-size: var(--dx-text-xs);
  font-weight: var(--dx-weight-semibold);
  white-space: nowrap;
}
.dx-chip.accent { color: var(--dx-color-accent); background: var(--dx-color-accent-soft); border-color: transparent; }
.dx-chip.success { color: var(--dx-color-success); background: var(--dx-color-success-soft); border-color: transparent; }
.dx-chip.warning { color: var(--dx-color-warning); background: var(--dx-color-warning-soft); border-color: transparent; }
.dx-chip.danger { color: var(--dx-color-danger); background: var(--dx-color-danger-soft); border-color: transparent; }
.dx-spark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dx-color-accent);
  box-shadow: 0 0 10px var(--dx-glow-accent-strong);
}
@keyframes dx-page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.dx-enter {
  animation: dx-page-enter var(--dx-duration-spring) var(--dx-ease-spring-soft) backwards;
  animation-delay: calc(min(var(--i, 0), 10) * 40ms);
}
@media (prefers-reduced-motion: reduce) {
  .dx-enter { animation: none; }
  .dx-row { transition: none; }
}
[data-motion='reduce'] .dx-enter { animation: none; }

/* Text controls a view draws itself get the kit fields' one focus treatment: the border turns orange
   inside a soft halo. Specificity (0,2,1): it beats a view's plain field styling (.form input), and a view's
   own focus rule at (0,2,1) or more still wins, but never with an outline: the browser's ring or a view's
   outline round a field that already lights its border is two borders.
   Scoped to the sandbox root (#dx-view) so the host chrome keeps its own rules. */
:where(#dx-view) :is(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset']), select, textarea):focus-visible {
  outline: none !important;
  border-color: var(--dx-color-focus);
  box-shadow: var(--dx-focus-field);
}

/* Fill layout (a tool; kit core/fill.js): the host gives the page the whole screen and a plain region marked
   data-dx-fill takes the room below what sits above it and scrolls inside. Outside a tool it is just content. */
[data-dx-layout='fill'] [data-dx-fill][data-dx-filled] {
  max-height: var(--dx-fill-height);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dx-fill-3) transparent;
}

/* Avoid a flash of unstyled custom elements before definition. */
:not(:defined):is(dx-tabs, dx-data-grid, dx-chart-line, dx-chart-bar, dx-area-chart, dx-wizard, dx-slot-picker, dx-set-logger, dx-board, dx-toolbar) {
  display: block;
  min-height: 2rem;
}