/*
 * Parastrate's values for the shared --wb-* vocabulary that every component
 * in src/components reads, and that every page should use for its colors
 * (see /style, the Style reference). Each component also carries its own
 * fallbacks, so a page without this file still renders, in their defaults.
 *
 * Light by default. Dark is opt-in, per page, on <html>:
 *   data-theme="auto"   follows the device (prefers-color-scheme)
 *   data-theme="dark"   always dark;  data-theme="light"  always light
 * A page that sets none stays light, as every page did before dark existed.
 */
:root {
  color-scheme: light;

  --wb-canvas: #f5f7fa;
  --wb-surface: #ffffff;
  --wb-surface-raised: #ffffff;
  --wb-surface-inset: #eef1f5;
  --wb-text: #0d1520;
  --wb-text-muted: #566374;
  --wb-border: #d6dde5;
  --wb-border-strong: #9aa8b8;
  --wb-accent: #7b3cff;          /* Purl violet */
  --wb-accent-hover: #6a2ef0;
  --wb-on-accent: #ffffff;
  --wb-focus: #7b3cff;
  --wb-danger: #b42318;
  --wb-on-danger: #ffffff;
  --wb-success: #147a42;
  --wb-on-success: #ffffff;
  --wb-warning: #a15c00;
  --wb-on-warning: #ffffff;
  --wb-info: #0566b3;
  --wb-on-info: #ffffff;
  --wb-neutral: #566374;
  --wb-on-neutral: #ffffff;

  --wb-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wb-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  --wb-font-size: 0.875rem;
  --wb-font-size-sm: 0.75rem;
  --wb-font-size-lg: 1rem;
  --wb-font-weight-semibold: 500;
  --wb-line-height: 1.45;

  --wb-space-1: 0.25rem;
  --wb-space-2: 0.5rem;
  --wb-space-3: 0.75rem;
  --wb-space-xs: 0.25rem;
  --wb-space-sm: 0.5rem;
  --wb-space-md: 0.75rem;
  --wb-space-lg: 1rem;
  --wb-space-xl: 1.5rem;

  --wb-control-block-size: 2rem;
  --wb-control-padding-inline: 0.75rem;
  --wb-border-width: 1px;
  --wb-radius-xs: 0.125rem;
  --wb-radius-sm: 0.125rem;
  --wb-radius-md: 0.125rem;
  --wb-radius-lg: 0.125rem;
  --wb-radius-control: 4px;
  --wb-shadow-sm: 0 0.0625rem 0.1875rem rgb(13 21 32 / 0.10);
  --wb-shadow-md: 0 0.25rem 1rem rgb(13 21 32 / 0.12);
  --wb-shadow-lg: 0 0.75rem 2rem rgb(13 21 32 / 0.16);
  --wb-elevation: var(--wb-shadow-md);
  --wb-z-dropdown: 1000;

  --wb-duration-fast: 120ms;
  --wb-duration-normal: 180ms;
  --wb-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Scroll bars: thin, with a Royal Purple thumb (the dashboard's accent, the
     darker violet); the track stays out of the way. The color is inherited, so
     every scrolling region and component on the page gets it; the width is
     not, so the `*` rule at the end of this file and each component's own
     stylesheet say thin themselves. Dark grounds get a lighter tint of the
     same purple, as Royal Purple would all but vanish on them. */
  --wb-scrollbar-thumb: #473089;
  --wb-scrollbar-track: transparent;
  scrollbar-color: var(--wb-scrollbar-thumb) var(--wb-scrollbar-track);
}

* { scrollbar-width: thin; }

/* Dark: Night grounds, Mist text, a lighter Purl violet so the accent keeps
   its contrast. Same names, so a page written in tokens needs nothing else. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --wb-canvas: #0d1520;
  --wb-surface: #151f2c;
  --wb-surface-raised: #1b2736;
  --wb-surface-inset: #1f2b3a;
  --wb-text: #e6ebf2;
  --wb-text-muted: #9aa8b8;
  --wb-border: #2a3747;
  --wb-border-strong: #4a5a6e;
  --wb-accent: #a98bff;
  --wb-accent-hover: #bda6ff;
  --wb-on-accent: #0d1520;
  --wb-focus: #a98bff;
  --wb-danger: #f97066;
  --wb-on-danger: #0d1520;
  --wb-success: #4ade80;
  --wb-on-success: #0d1520;
  --wb-warning: #fbbf24;
  --wb-on-warning: #0d1520;
  --wb-info: #60a5fa;
  --wb-on-info: #0d1520;
  --wb-neutral: #9aa8b8;
  --wb-on-neutral: #0d1520;
  --wb-scrollbar-thumb: #8466dc;
  --wb-shadow-sm: 0 0.0625rem 0.1875rem rgb(0 0 0 / 0.4);
  --wb-shadow-md: 0 0.25rem 1rem rgb(0 0 0 / 0.45);
  --wb-shadow-lg: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --wb-canvas: #0d1520;
    --wb-surface: #151f2c;
    --wb-surface-raised: #1b2736;
    --wb-surface-inset: #1f2b3a;
    --wb-text: #e6ebf2;
    --wb-text-muted: #9aa8b8;
    --wb-border: #2a3747;
    --wb-border-strong: #4a5a6e;
    --wb-accent: #a98bff;
    --wb-accent-hover: #bda6ff;
    --wb-on-accent: #0d1520;
    --wb-focus: #a98bff;
    --wb-danger: #f97066;
    --wb-on-danger: #0d1520;
    --wb-success: #4ade80;
    --wb-on-success: #0d1520;
    --wb-warning: #fbbf24;
    --wb-on-warning: #0d1520;
    --wb-info: #60a5fa;
    --wb-on-info: #0d1520;
    --wb-neutral: #9aa8b8;
    --wb-on-neutral: #0d1520;
    --wb-scrollbar-thumb: #8466dc;
    --wb-shadow-sm: 0 0.0625rem 0.1875rem rgb(0 0 0 / 0.4);
    --wb-shadow-md: 0 0.25rem 1rem rgb(0 0 0 / 0.45);
    --wb-shadow-lg: 0 0.75rem 2rem rgb(0 0 0 / 0.5);
  }
}