/* Snapshot of the extension's generated design tokens; upstream provenance is in README.md.
   Preserve generated values from upstream tokens.json rather than editing them here.
   This guide uses :root; :host selectors are retained from the extension stylesheet. */
:host, :root {
  --eds-font-ui: 13px;
  --eds-font-pill: 13.33px;
  --eds-font-label: 11px;
  --eds-font-title: 14px;
  --eds-font-family: Assistant, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --eds-size-control: 36px;
  --eds-size-pill: 38px;
  --eds-size-panel: 320px;
  --eds-size-gap: 8px;
  --eds-size-pad: 14px;
  --eds-size-dot: 8px;
  --eds-size-mark: 18px;
  --eds-size-icon: 20px;
  --eds-size-pad-card: 14px;
  --eds-size-chip: 28px;
  --eds-radius-md: 8px;
  --eds-radius-lg: 12px;
  --eds-radius-pill: 12px;
  --eds-radius-chip: 999px;
  --eds-radius-field: 999px;
  --eds-shadow-island: 0 0 1px rgba(0,0,0,.17), 0 0 3px rgba(0,0,0,.08), 0 7px 14px rgba(0,0,0,.05);
}

/* light (default) */
:host, :root {
  --eds-accent: #6965db;
  --eds-accent-hover: #5753d0;
  --eds-accent-soft: #f1f0ff;
  --eds-accent-container: #e0dfff;
  --eds-on-accent: #ffffff;
  --eds-island: #ffffff;
  --eds-page: #ffffff;
  --eds-border: #f1f0ff;
  --eds-border-strong: #d6d6e0;
  --eds-surface: #f6f6f9;
  --eds-surface-low: #ececf4;
  --eds-text: #1b1b1f;
  --eds-text-muted: #7a7a7a;
  --eds-text-faint: #999999;
  --eds-saved: #2f9e44;
  --eds-unsaved: #e8590c;
  --eds-saving: #6965db;
  --eds-none: #adb5bd;
  --eds-conflict: #e03131;
  --eds-danger-bg: #fff0f0;
  --eds-danger-text: #c92a2a;
  --eds-pill-bg: #fbfbff;
  --eds-pill-border: #f1f0ff;
  --eds-card-tint: #f1f0ff;
  --eds-card-edge: #6965db;
  --eds-field-bg: #f6f6f9;
  --eds-row-hover: #f6f6f9;
  --eds-chip-border: #d6d6e0;
}

/* dark: page UI follows Excalidraw's own theme class (ADR 0013) */
:host-context(.excalidraw.theme--dark), :host([data-theme="dark"]) {
  --eds-accent: #a8a5ff;
  --eds-accent-hover: #bbb8ff;
  --eds-accent-soft: #2e2d39;
  --eds-accent-container: #403e6a;
  --eds-on-accent: #121212;
  --eds-island: #232329;
  --eds-page: #121212;
  --eds-border: #2e2d39;
  --eds-border-strong: #3f3e4d;
  --eds-surface: #1b1b21;
  --eds-surface-low: #27272f;
  --eds-text: #e3e3e8;
  --eds-text-muted: #999999;
  --eds-text-faint: #7a7a7a;
  --eds-saved: #69db7c;
  --eds-unsaved: #ffa94d;
  --eds-saving: #a8a5ff;
  --eds-none: #868e96;
  --eds-conflict: #ff8787;
  --eds-danger-bg: #3a2222;
  --eds-danger-text: #ffa8a5;
  --eds-pill-bg: #2a2940;
  --eds-pill-border: #2e2d39;
  --eds-card-tint: #2f2d44;
  --eds-card-edge: #a8a5ff;
  --eds-field-bg: #2e2d39;
  --eds-row-hover: #2a2a33;
  --eds-chip-border: #3f3e4d;
}

/* The guide, like the extension popup, follows system appearance. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --eds-accent: #a8a5ff;
    --eds-accent-hover: #bbb8ff;
    --eds-accent-soft: #2e2d39;
    --eds-accent-container: #403e6a;
    --eds-on-accent: #121212;
    --eds-island: #232329;
    --eds-page: #121212;
    --eds-border: #2e2d39;
    --eds-border-strong: #3f3e4d;
    --eds-surface: #1b1b21;
    --eds-surface-low: #27272f;
    --eds-text: #e3e3e8;
    --eds-text-muted: #999999;
    --eds-text-faint: #7a7a7a;
    --eds-saved: #69db7c;
    --eds-unsaved: #ffa94d;
    --eds-saving: #a8a5ff;
    --eds-none: #868e96;
    --eds-conflict: #ff8787;
    --eds-danger-bg: #3a2222;
    --eds-danger-text: #ffa8a5;
    --eds-pill-bg: #2a2940;
    --eds-pill-border: #2e2d39;
    --eds-card-tint: #2f2d44;
    --eds-card-edge: #a8a5ff;
    --eds-field-bg: #2e2d39;
    --eds-row-hover: #2a2a33;
    --eds-chip-border: #3f3e4d;
}
}

/* saving pulse */
@keyframes eds-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .eds-dot.saving { animation: none } }