/* RADAR v3 — shared starting tokens, not a finished component library.
   Scope styles to .radar-ui. Integrate with the existing site's CSP and CSS.
   No remote fonts or Apple font assets. Numbers/radii/durations are RADAR
   proposals informed by the referenced guidelines, not Apple specifications.
   Theme: data-appearance="system" (default), "light" or "dark". */

.radar-ui {
  --radar-canvas: #F5F5F7;
  --radar-surface: #FFFFFF;
  --radar-surface-raised: #FFFFFF;
  --radar-surface-muted: #ECEEF1;
  --radar-text: #1D1D1F;
  --radar-text-secondary: #565A61;
  --radar-accent: #006A63;
  --radar-on-accent: #FFFFFF;
  --radar-divider: #D7DADF;
  --radar-control-border: #787D84;
  --radar-positive: #1A6B4B;
  --radar-negative: #B42335;
  --radar-caution: #885B05;
  --radar-focus: #006A63;
  color-scheme: light;
  --radar-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radar-space-1: .25rem;
  --radar-space-2: .5rem;
  --radar-space-3: .75rem;
  --radar-space-4: 1rem;
  --radar-space-5: 1.5rem;
  --radar-space-6: 2rem;
  --radar-space-7: 3rem;
  --radar-space-8: 4.5rem;
  --radar-space-9: 6rem;
  --radar-radius-control: .75rem;
  --radar-radius-card: 1.25rem;
  --radar-radius-sheet: 1.75rem;
  --radar-radius-pill: 999px;
  --radar-size-body: 1.0625rem;
  --radar-size-label: .9375rem;
  --radar-size-meta: .875rem;
  --radar-size-title: clamp(1.875rem, 5vw, 2.125rem);
  --radar-size-hero: clamp(2.375rem, 5.5vw, 4.75rem);
  --radar-leading-body: 1.5;
  --radar-leading-title: 1.12;
  --radar-weight-regular: 400;
  --radar-weight-medium: 500;
  --radar-weight-emphasis: 600;
  --radar-touch-target: 2.75rem; /* 44 CSS px at a 16px root; not native pt. */
  --radar-duration-feedback: 120ms;
  --radar-duration-standard: 200ms;
  --radar-duration-navigation: 280ms;
  --radar-ease: cubic-bezier(.2, .8, .2, 1);
  --radar-shadow-card: 0 2px 12px rgb(15 23 42 / .055);
  --radar-shadow-overlay: 0 12px 38px rgb(15 23 42 / .14);
  --radar-nav-material: rgb(255 255 255 / .94);
  --radar-content-width: 74rem;
  --radar-reading-width: 38rem;
  --radar-gutter: clamp(1rem, 4vw, 3rem);
  color: var(--radar-text);
  background: var(--radar-canvas);
  font-family: var(--radar-font);
  font-size: var(--radar-size-body);
  line-height: var(--radar-leading-body);
  -webkit-text-size-adjust: 100%;
}

/* Explicit dark appearance. */
.radar-ui[data-appearance="dark"] {
  --radar-canvas: #111214;
  --radar-surface: #1C1D21;
  --radar-surface-raised: #282A30;
  --radar-surface-muted: #24262B;
  --radar-text: #F5F5F7;
  --radar-text-secondary: #ACB1B8;
  --radar-accent: #83D6CB;
  --radar-on-accent: #0D2321;
  --radar-divider: #3A3D43;
  --radar-control-border: #797E86;
  --radar-positive: #8CD4AD;
  --radar-negative: #FF8794;
  --radar-caution: #E7C171;
  --radar-focus: #83D6CB;
  color-scheme: dark;
  --radar-nav-material: rgb(28 29 33 / .94);
  --radar-shadow-card: 0 2px 12px rgb(0 0 0 / .10);
  --radar-shadow-overlay: 0 12px 38px rgb(0 0 0 / .28);
}

/* System appearance only; a deliberate Light choice always wins. */
@media (prefers-color-scheme: dark) {
  .radar-ui:not([data-appearance="light"]):not([data-appearance="dark"]) {
    --radar-canvas: #111214;
    --radar-surface: #1C1D21;
    --radar-surface-raised: #282A30;
    --radar-surface-muted: #24262B;
    --radar-text: #F5F5F7;
    --radar-text-secondary: #ACB1B8;
    --radar-accent: #83D6CB;
    --radar-on-accent: #0D2321;
    --radar-divider: #3A3D43;
    --radar-control-border: #797E86;
    --radar-positive: #8CD4AD;
    --radar-negative: #FF8794;
    --radar-caution: #E7C171;
    --radar-focus: #83D6CB;
    color-scheme: dark;
    --radar-nav-material: rgb(28 29 33 / .94);
    --radar-shadow-card: 0 2px 12px rgb(0 0 0 / .10);
    --radar-shadow-overlay: 0 12px 38px rgb(0 0 0 / .28);
  }
}

.radar-ui :where(button, input, select, textarea) { font: inherit; }
.radar-ui :where(button, [href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--radar-focus);
  outline-offset: 3px;
}
.radar-ui :where([data-radar-control]) {
  min-inline-size: var(--radar-touch-target);
  min-block-size: var(--radar-touch-target);
  padding: .625rem .875rem;
  border-radius: var(--radar-radius-control);
  font-size: var(--radar-size-label);
  line-height: 1.25;
}
.radar-ui :where([data-radar-button="primary"]) {
  color: var(--radar-on-accent);
  background: var(--radar-accent);
  border: 1px solid transparent;
}
.radar-ui :where([data-radar-button="secondary"]) {
  color: var(--radar-text);
  background: transparent;
  border: 1px solid transparent;
}
.radar-ui :where([data-radar-control]):not(:disabled):active {
  transform: translateY(1px);
}
.radar-ui :where([data-radar-control]):disabled {
  cursor: not-allowed;
  opacity: .65;
}
.radar-ui :where([data-radar-meta]) {
  color: var(--radar-text-secondary);
  font-size: var(--radar-size-meta);
  line-height: 1.45;
}
.radar-ui :where([data-radar-number]) { font-variant-numeric: tabular-nums lining-nums; }
.radar-ui :where([data-radar-content-surface]) {
  background: var(--radar-surface); /* Keep data on an opaque content layer. */
  color: var(--radar-text);
  border-radius: var(--radar-radius-card);
}
.radar-ui :where([data-radar-navigation-material]) {
  background: var(--radar-surface);
  color: var(--radar-text);
}
@supports (backdrop-filter: blur(12px)) {
  .radar-ui :where([data-radar-navigation-material]) {
    background: var(--radar-nav-material);
    backdrop-filter: blur(12px);
  }
}
.radar-ui :where([data-radar-tabbar]) {
  padding-block-end: max(.5rem, env(safe-area-inset-bottom, 0px));
}
.radar-ui :where([data-radar-expanded-preview]) {
  min-block-size: 100svh;
  block-size: 100dvh;
  background: var(--radar-canvas);
}
/* Do not apply overflow:hidden to body or disable zoom to fit the preview.
   The route/overlay controller must restore scroll and keyboard focus. */
.radar-ui :where([data-radar-reading-content]) {
  max-inline-size: var(--radar-reading-width);
  overflow-wrap: break-word;
}
.radar-ui :where([data-radar-chart-table]) { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .radar-ui {
    --radar-duration-feedback: 1ms;
    --radar-duration-standard: 1ms;
    --radar-duration-navigation: 1ms;
  }
  .radar-ui, .radar-ui * { scroll-behavior: auto !important; }
  .radar-ui [data-radar-decorative-motion] { animation: none !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .radar-ui [data-radar-navigation-material] { background: var(--radar-surface); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .radar-ui [data-radar-navigation-material] { background: var(--radar-surface); backdrop-filter: none; }
  .radar-ui [data-radar-control] { border-color: var(--radar-text-secondary); }
}
@media (forced-colors: active) {
  .radar-ui { color: CanvasText; background: Canvas; }
  .radar-ui [data-radar-navigation-material], .radar-ui [data-radar-content-surface] {
    color: CanvasText; background: Canvas; backdrop-filter: none;
  }
  .radar-ui [data-radar-control] { border: 1px solid ButtonText; }
  .radar-ui :where(button, [href], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
  }
}