/* pura — design tokens
   Custom properties inherit through the Shadow DOM boundary, so defining them
   on :root is enough to theme every component. Light is default; dark is opt-in
   via [data-theme="dark"] and also auto-applies under prefers-color-scheme. */

:root {
  /* neutral surfaces */
  --pura-bg: #ffffff;
  --pura-fg: #09090b;
  --pura-muted: #6b6b74;
  --pura-muted-fg: #52525b;
  --pura-subtle: #f4f4f5;
  --pura-subtle-hover: #ececee;
  --pura-border: #e4e4e7;
  --pura-border-strong: #d4d4d8;

  /* primary (neutral, near-black) */
  --pura-primary: #18181b;
  --pura-primary-hover: #27272a;
  --pura-primary-fg: #fafafa;

  /* accent / focus ring (single refined blue) */
  --pura-accent: #2563eb;
  --pura-ring: color-mix(in srgb, var(--pura-accent) 45%, transparent);

  /* status */
  --pura-success: #16a34a;
  --pura-success-fg: #15803d;
  --pura-success-bg: #f0fdf4;
  --pura-warning: #d97706;
  --pura-warning-bg: #fffbeb;
  --pura-danger: #dc2626;
  --pura-danger-solid: #dc2626;
  --pura-danger-bg: #fef2f2;
  --pura-info: #2563eb;
  --pura-info-bg: #eff6ff;

  /* radius */
  --pura-radius-sm: 0.375rem;
  --pura-radius: 0.625rem;
  --pura-radius-lg: 0.875rem;
  --pura-radius-full: 999px;

  /* spacing scale */
  --pura-space-1: 0.25rem;
  --pura-space-2: 0.5rem;
  --pura-space-3: 0.75rem;
  --pura-space-4: 1rem;
  --pura-space-5: 1.5rem;
  --pura-space-6: 2rem;

  /* typography */
  --pura-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --pura-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
    Menlo, Consolas, monospace;
  --pura-text-xs: 0.75rem;
  --pura-text-sm: 0.875rem;
  --pura-text-base: 0.9375rem;
  --pura-text-lg: 1.125rem;
  --pura-text-xl: 1.5rem;

  /* shadows (soft, refined) */
  --pura-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pura-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --pura-shadow-lg: 0 10px 30px -10px rgb(0 0 0 / 0.25),
    0 4px 12px -6px rgb(0 0 0 / 0.12);

  /* motion — duration scale (short micro -> long overlay) */
  --pura-duration-1: 100ms;
  --pura-duration-2: 150ms;
  --pura-duration-3: 200ms;
  --pura-duration-4: 300ms;
  --pura-duration-5: 400ms;
  --pura-duration-6: 600ms;

  /* motion — named easings. Rule: decelerate in, accelerate out, linear reads
     as broken. spring/emphasized are the expressive tier for hero moments. */
  --pura-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pura-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --pura-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --pura-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
  --pura-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* motion switch: 1 = motion on, 0 = off. Multiply any duration by it so a
     single token disables motion library-wide. Flipped under reduced-motion. */
  --pura-motion: 1;

  /* back-compat aliases (pre-token-scale components reference these) */
  --pura-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pura-dur: 160ms;

  /* chart series palette (multi-series, light) */
  --pura-chart-1: #2563eb;
  --pura-chart-2: #16a34a;
  --pura-chart-3: #d97706;
  --pura-chart-4: #dc2626;
  --pura-chart-5: #7c3aed;
  --pura-chart-6: #0891b2;
  --pura-chart-7: #db2777;
  --pura-chart-8: #65a30d;

  color-scheme: light;
}

/* reduced motion: flip the global switch so any duration multiplied by
   var(--pura-motion) collapses to 0. base.js RESET already zeroes raw
   transition/animation durations; this token covers JS-driven motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pura-motion: 0;
  }
}

:root[data-theme="dark"] {
  --pura-bg: #09090b;
  --pura-fg: #fafafa;
  --pura-muted: #a1a1aa;
  --pura-muted-fg: #d4d4d8;
  --pura-subtle: #18181b;
  --pura-subtle-hover: #27272a;
  --pura-border: #27272a;
  --pura-border-strong: #3f3f46;

  --pura-primary: #fafafa;
  --pura-primary-hover: #e4e4e7;
  --pura-primary-fg: #18181b;

  --pura-accent: #3b82f6;
  --pura-ring: color-mix(in srgb, var(--pura-accent) 50%, transparent);

  --pura-success: #4ade80;
  --pura-success-fg: #4ade80;
  --pura-success-bg: #052e16;
  --pura-warning: #fbbf24;
  --pura-warning-bg: #2c1c02;
  --pura-danger: #f87171;
  --pura-danger-solid: #dc2626;
  --pura-danger-bg: #2a0a0a;
  --pura-info: #60a5fa;
  --pura-info-bg: #0a1a33;

  --pura-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --pura-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.6);
  --pura-shadow-lg: 0 10px 30px -10px rgb(0 0 0 / 0.7),
    0 4px 12px -6px rgb(0 0 0 / 0.5);

  /* chart series palette (multi-series, dark) */
  --pura-chart-1: #3b82f6;
  --pura-chart-2: #4ade80;
  --pura-chart-3: #fbbf24;
  --pura-chart-4: #f87171;
  --pura-chart-5: #a78bfa;
  --pura-chart-6: #22d3ee;
  --pura-chart-7: #f472b6;
  --pura-chart-8: #a3e635;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pura-bg: #09090b;
    --pura-fg: #fafafa;
    --pura-muted: #a1a1aa;
    --pura-muted-fg: #d4d4d8;
    --pura-subtle: #18181b;
    --pura-subtle-hover: #27272a;
    --pura-border: #27272a;
    --pura-border-strong: #3f3f46;
    --pura-primary: #fafafa;
    --pura-primary-hover: #e4e4e7;
    --pura-primary-fg: #18181b;
    --pura-accent: #3b82f6;
    --pura-ring: color-mix(in srgb, var(--pura-accent) 50%, transparent);
    --pura-success: #4ade80;
    --pura-success-fg: #4ade80;
    --pura-success-bg: #052e16;
    --pura-warning: #fbbf24;
    --pura-warning-bg: #2c1c02;
    --pura-danger: #f87171;
    --pura-danger-solid: #dc2626;
    --pura-danger-bg: #2a0a0a;
    --pura-info: #60a5fa;
    --pura-info-bg: #0a1a33;
    --pura-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --pura-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.6);
    --pura-shadow-lg: 0 10px 30px -10px rgb(0 0 0 / 0.7),
      0 4px 12px -6px rgb(0 0 0 / 0.5);
    --pura-chart-1: #3b82f6;
    --pura-chart-2: #4ade80;
    --pura-chart-3: #fbbf24;
    --pura-chart-4: #f87171;
    --pura-chart-5: #a78bfa;
    --pura-chart-6: #22d3ee;
    --pura-chart-7: #f472b6;
    --pura-chart-8: #a3e635;
    color-scheme: dark;
  }
}