/* GENERATED by build.sh from packages/design-system/src/tokens.css - do not hand-edit. */
/**
 * @flex/design-system - CSS custom properties
 * Generated from tokens.ts. Do not hand-edit: change tokens.ts and re-emit.
 *
 * Theme behavior (§5.1):
 * - default to stored user preference when authenticated (set data-theme on <html>)
 * - otherwise respect prefers-color-scheme
 * - persist without flash of incorrect theme: inline the snippet below in <head>
 *   BEFORE any stylesheet, so the attribute is set prior to first paint.
 *
 *   <script>
 *     try {
 *       var t = localStorage.getItem('flex-theme');
 *       if (!t) t = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 *       document.documentElement.setAttribute('data-theme', t);
 *     } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
 *     // NOTE: use the authenticated user's stored preference instead of
 *     // localStorage when one exists; localStorage is the anonymous fallback.
 *   </script>
 */

:root,
:root[data-theme='light'] {
  --flex-color-black: #000000;
  --flex-color-near-black: #0a0a0a;
  --flex-color-charcoal: #151515;
  --flex-color-graphite: #232323;
  --flex-color-mid-gray: #666666;
  --flex-color-border-gray: #d7d7d7;
  --flex-color-soft-gray: #f2f2f2;
  --flex-color-off-white: #fafafa;
  --flex-color-white: #ffffff;

  --flex-lime-500: #c7ff00;
  --flex-lime-hover: #b8ed00;
  --flex-lime-muted: rgba(199, 255, 0, 0.12);
  --flex-lime-border: rgba(199, 255, 0, 0.48);

  --flex-overlay-scrim: rgba(0, 0, 0, 0.55);

  --flex-theme-canvas: #ffffff;
  --flex-theme-surface: #fafafa;
  --flex-theme-surface-elevated: #f2f2f2;
  --flex-theme-surface-interactive: #e9e9e9;
  --flex-theme-text-primary: #000000;
  --flex-theme-text-secondary: #414141;
  --flex-theme-text-muted: #686868;
  --flex-theme-border: #d7d7d7;
  --flex-theme-accent: #c7ff00;
  --flex-theme-accent-text: #000000;
  --flex-theme-focus: #000000;
  --flex-theme-focus-outer: rgba(199, 255, 0, 0.48);
  --flex-theme-selection: rgba(199, 255, 0, 0.24);

  --flex-space-1: 4px;
  --flex-space-2: 8px;
  --flex-space-3: 12px;
  --flex-space-4: 16px;
  --flex-space-5: 20px;
  --flex-space-6: 24px;
  --flex-space-7: 32px;
  --flex-space-8: 40px;
  --flex-space-9: 48px;
  --flex-space-10: 64px;
  --flex-space-11: 80px;
  --flex-space-12: 96px;

  --flex-radius-sm: 2px;
  --flex-radius-md: 6px;
  --flex-radius-lg: 10px;

  --flex-motion-fast: 120ms;
  --flex-motion-normal: 200ms;
  --flex-motion-slow: 320ms;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --flex-theme-canvas: #000000;
  --flex-theme-surface: #0a0a0a;
  --flex-theme-surface-elevated: #151515;
  --flex-theme-surface-interactive: #232323;
  --flex-theme-text-primary: #ffffff;
  --flex-theme-text-secondary: #bebebe;
  --flex-theme-text-muted: #8a8a8a;
  --flex-theme-border: #2f2f2f;
  --flex-theme-accent: #c7ff00;
  --flex-theme-accent-text: #000000;
  --flex-theme-focus: #c7ff00;
  --flex-theme-focus-outer: rgba(199, 255, 0, 0.48);
  --flex-theme-selection: rgba(199, 255, 0, 0.14);

  color-scheme: dark;
}

/* Anonymous default follows the OS when no explicit preference is stored. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --flex-theme-canvas: #000000;
    --flex-theme-surface: #0a0a0a;
    --flex-theme-surface-elevated: #151515;
    --flex-theme-surface-interactive: #232323;
    --flex-theme-text-primary: #ffffff;
    --flex-theme-text-secondary: #bebebe;
    --flex-theme-text-muted: #8a8a8a;
    --flex-theme-border: #2f2f2f;
    --flex-theme-accent: #c7ff00;
    --flex-theme-accent-text: #000000;
    --flex-theme-focus: #c7ff00;
    --flex-theme-focus-outer: rgba(199, 255, 0, 0.48);
    --flex-theme-selection: rgba(199, 255, 0, 0.14);

    color-scheme: dark;
  }
}