/* Generated by site/build.mjs from src/styles/tokens.css, light.css and dark.css.
   Do not edit: change the extension tokens and rebuild. */

/* ============================================================
   Design tokens — the single source of truth for raw scale values.
   Generated 2026-09-14 by ext-design-system; every color pair was measured
   against WCAG 2.x, see docs/design/design-system.md §5.5.

   Archetype: dense dev tool — dark-first, 13px base, mono for data, 4px grid.

   Put here (theme-independent, declared on :root):
     - spacing, radius, motion and z-index scales
     - typography scale, icon sizes and touch targets
     - brand, status and functional palette primitives (light values)
     - focus and locked-state primitives

   Do NOT put semantic aliases here (--loupewire-bg, --loupewire-text, ...);
   those live in light.css and dark.css so a theme swap changes only
   aliases, never scale values. Components consume aliases, never these
   primitives directly.

   Naming: every custom property is prefixed --loupewire-. :root carries
   custom-property declarations ONLY; tests/styles/scoping.test.ts enforces
   this. No web fonts: fetching one is an external request the privacy
   rules forbid.
   ============================================================ */

:root {
  /* Spacing (4px grid) */
  --loupewire-space-xxs: 2px;
  --loupewire-space-xs: 4px;
  --loupewire-space-sm: 8px;
  --loupewire-space-md: 12px;
  --loupewire-space-lg: 16px;
  --loupewire-space-xl: 24px;

  /* Radius */
  --loupewire-radius-sm: 3px;
  --loupewire-radius-md: 6px;
  --loupewire-radius-lg: 10px;
  --loupewire-radius-full: 9999px;

  /* Shadows are theme aliases (light/dark alpha differ); defined in light.css / dark.css, not here. */

  /* Motion */
  --loupewire-transition-fast: 120ms;
  --loupewire-transition-base: 180ms;
  --loupewire-transition-slow: 280ms;
  --loupewire-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Z-index — only the tiers this extension has: standard, modal, overlay.
     No floating-chrome tier (nothing is injected into websites), no viewer, no top-most. */
  --loupewire-z-dropdown: 1000;
  --loupewire-z-sticky: 1020;
  --loupewire-z-modal-backdrop: 1040;
  --loupewire-z-modal: 1050;
  --loupewire-z-popover: 1060;
  --loupewire-z-tooltip: 1070; /* above modal on purpose: locked tooltips must show inside the export dialog */
  --loupewire-z-banner: 10100;
  --loupewire-z-toast: 10110;

  /* Typography — system stacks only; a web font is a network request the on-device stance forbids */
  /* Arabic faces stay in the stack while the Arabic locale ships (see CLAUDE.md, i18n). */
  --loupewire-font-family-ui:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Geeza Pro',
    'Noto Naskh Arabic', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, 'Noto Sans', sans-serif;
  --loupewire-font-family-mono:
    ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --loupewire-font-size-xs: 11px;
  --loupewire-font-size-sm: 12px;
  --loupewire-font-size-mono: 12px;
  --loupewire-font-size-ui: 13px;
  --loupewire-font-size-md: 14px;
  --loupewire-font-size-lg: 16px;
  --loupewire-font-size-xl: 20px;
  --loupewire-font-weight-normal: 400;
  --loupewire-font-weight-medium: 500;
  --loupewire-font-weight-semibold: 600;
  --loupewire-line-height-tight: 1.25;
  --loupewire-line-height-normal: 1.45;
  --loupewire-line-height-relaxed: 1.6;

  /* Icon sizes and targets */
  --loupewire-icon-xs: 12px;
  --loupewire-icon-sm: 16px;
  --loupewire-icon-md: 20px;
  --loupewire-icon-lg: 24px;
  --loupewire-target-dense: 24px; /* tracker table and toolbar */
  --loupewire-target-popup: 32px; /* options page */
  --loupewire-row-height: 26px;
  --loupewire-popup-width: 360px; /* reserved by the design system; no popup surface since ROADMAP 0.1 */
  --loupewire-options-inline-size: 640px; /* options page content column */
  --loupewire-modal-inline-size: 480px;
  --loupewire-tooltip-max-inline-size: 280px;

  /* Brand — light values; dark.css overrides them */
  --loupewire-brand-primary: #925e0e;
  --loupewire-brand-primary-hover: #7e500c;
  --loupewire-brand-primary-active: #6a430a;
  --loupewire-brand-primary-subtle: rgba(146, 94, 14, 0.12);
  --loupewire-brand-primary-ink: #ffffff;
  --loupewire-brand-accent: #0284c7; /* focus ring and backgrounds only: 3.92:1 on bg, not a text color */
  --loupewire-brand-accent-ink: #0369a1; /* text and icons in accent: 5.68:1 on bg */
  --loupewire-brand-accent-subtle: rgba(2, 132, 199, 0.14);

  /* Status — warning is orange-red, not yellow, so it never reads as the amber primary */
  --loupewire-status-success: #1b7f4e;
  --loupewire-status-warning: #b4471b;
  --loupewire-status-danger: #c0262e;
  --loupewire-status-info: #1d6fbf;
  --loupewire-status-success-subtle: rgba(27, 127, 78, 0.14);
  --loupewire-status-warning-subtle: rgba(180, 71, 27, 0.14);
  --loupewire-status-danger-subtle: rgba(192, 38, 46, 0.14);
  --loupewire-status-info-subtle: rgba(29, 111, 191, 0.14);

  /* Functional palette — overlay / solid / ink, light values; dark.css overrides them.
     Assignment: blue GET · green POST, 2xx, diff added · yellow PUT, 4xx, diff changed ·
     red DELETE, 5xx, diff removed, ERR · purple PATCH, fromCache · teal OPTIONS/HEAD, 3xx, redirect chain ·
     pink request modified by a header rule · slate masked value, other methods, 1xx */
  --loupewire-color-blue-overlay: rgba(47, 111, 219, 0.16);
  --loupewire-color-blue-solid: #2f6fdb;
  --loupewire-color-blue-ink: #1f4fa3;
  --loupewire-color-green-overlay: rgba(46, 158, 91, 0.16);
  --loupewire-color-green-solid: #2e9e5b;
  --loupewire-color-green-ink: #1b6b3a;
  --loupewire-color-yellow-overlay: rgba(184, 122, 10, 0.16);
  --loupewire-color-yellow-solid: #b87a0a;
  --loupewire-color-yellow-ink: #7d5407;
  --loupewire-color-red-overlay: rgba(217, 65, 74, 0.16);
  --loupewire-color-red-solid: #d9414a;
  --loupewire-color-red-ink: #a62830;
  --loupewire-color-purple-overlay: rgba(126, 91, 214, 0.16);
  --loupewire-color-purple-solid: #7e5bd6;
  --loupewire-color-purple-ink: #5a3ba8;
  --loupewire-color-teal-overlay: rgba(23, 143, 140, 0.16);
  --loupewire-color-teal-solid: #178f8c;
  --loupewire-color-teal-ink: #106e6c;
  --loupewire-color-pink-overlay: rgba(214, 71, 154, 0.16);
  --loupewire-color-pink-solid: #d6479a;
  --loupewire-color-pink-ink: #a32c72;
  --loupewire-color-slate-overlay: rgba(111, 122, 136, 0.16);
  --loupewire-color-slate-solid: #6f7a88;
  --loupewire-color-slate-ink: #4a525c;

  /* Focus */
  --loupewire-focus-ring: 0 0 0 2px var(--loupewire-brand-accent);
  --loupewire-focus-offset: 2px;

  /* Locked state (FREE limit reached). The control keeps pointer and click; never the disabled attribute. */
  --loupewire-lock-glyph-size: 12px;
  --loupewire-lock-cursor: pointer;
}

/* Motion primitives collapse to zero when the user asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --loupewire-transition-fast: 0ms;
    --loupewire-transition-base: 0ms;
    --loupewire-transition-slow: 0ms;
  }
}

/* ============================================================
   Light theme — semantic color aliases, the default block.

   Every page stamps html[data-loupewire-theme] from a boot script in <head>
   (stored choice, else matchMedia — no page carries a markup default), so the
   attribute is always present and light needs no selector of its own:
   :root is the default, dark.css overrides once under
   html[data-loupewire-theme="dark"]. No prefers-color-scheme block.

   Components consume ONLY these aliases, so they need no theme-specific
   selectors. An alias defined here must also be defined in dark.css when
   its value differs.
   ============================================================ */

:root {
  /* Tells the UA which palette this document uses, so the parts it paints
     itself — scrollbars, form controls, the canvas behind the page — match
     the theme we stamped. Without it Chrome assumes light and renders a pale
     scrollbar over the dark tracker. Not a custom property, and the only
     declaration in the shared layer that is allowed not to be: it styles no
     element, it answers a question the UA asks about the whole document, and
     it has to sit beside the aliases because it flips with them. */
  color-scheme: light;

  --loupewire-bg: #fafaf8;
  --loupewire-surface: #ffffff;
  --loupewire-surface-raised: #f3f2ee;
  --loupewire-surface-hover: #eeece6;
  --loupewire-surface-selected: var(--loupewire-brand-primary-subtle);
  --loupewire-border: #d9d6cf;
  --loupewire-border-strong: #8f8a80;
  --loupewire-text: #1c1a16;
  --loupewire-text-muted: #5f5b53;
  --loupewire-text-disabled: #9e9a92;
  --loupewire-text-locked: #6b665d;
  --loupewire-accent: var(--loupewire-brand-primary);
  --loupewire-accent-ink: var(--loupewire-brand-primary-ink);
  --loupewire-focus: var(--loupewire-brand-accent);
  /* Text on a status-danger fill (danger button). Dark uses the dark ink: white on the dark red is ~3:1. */
  --loupewire-status-danger-ink: #ffffff;
  --loupewire-mark-bg: var(--loupewire-brand-accent-subtle);
  --loupewire-mask-text: var(--loupewire-color-slate-ink);
  --loupewire-mask-bg: var(--loupewire-color-slate-overlay);
  --loupewire-lock-glyph-color: var(--loupewire-text-muted);
  /* Thumb and track for browser-painted scrollbars. Their own aliases rather
     than a reused border colour: a scrollbar sits over content of varying
     lightness and the two themes want to tune it independently. */
  --loupewire-scrollbar-thumb: #c9c5bc;
  --loupewire-scrollbar-track: transparent;
  --loupewire-tooltip-bg: #1c1a16;
  --loupewire-tooltip-text: #fafaf8;
  --loupewire-modal-backdrop: rgba(28, 26, 22, 0.4);
  --loupewire-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --loupewire-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --loupewire-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* High-contrast mode: drop shadows, let system colors drive; keep the lock glyph since muted text
   no longer reads as locked. Both selectors, because the dark block outranks a bare :root. */
@media (forced-colors: active) {
  :root,
  html[data-loupewire-theme='dark'] {
    --loupewire-shadow-sm: none;
    --loupewire-shadow-md: none;
    --loupewire-shadow-lg: none;
    --loupewire-focus-ring: 0 0 0 2px Highlight;
  }
}

/* ============================================================
   Dark theme — overrides for the aliases defined in light.css, plus the
   dark values of the brand, status and functional primitives, scoped to
   html[data-loupewire-theme="dark"] (stamped by the boot script in <head>).

   Redefine only what changes in dark mode. Never introduce an alias here
   that light.css does not also define.
   ============================================================ */

html[data-loupewire-theme='dark'] {
  /* See the note in light.css: this is what makes the UA paint scrollbars and
     form controls dark instead of assuming a light page. */
  color-scheme: dark;

  --loupewire-brand-primary: #e8a33d;
  --loupewire-brand-primary-hover: #f0b458;
  --loupewire-brand-primary-active: #cf8f2e;
  --loupewire-brand-primary-subtle: rgba(232, 163, 61, 0.14);
  --loupewire-brand-primary-ink: #101418;
  --loupewire-brand-accent: #38bdf8;
  --loupewire-brand-accent-ink: #38bdf8;
  --loupewire-brand-accent-subtle: rgba(56, 189, 248, 0.18);

  --loupewire-status-success: #3ddc97;
  --loupewire-status-warning: #ff8a4c;
  --loupewire-status-danger: #f0616b;
  --loupewire-status-info: #5eb3f6;
  --loupewire-status-success-subtle: rgba(61, 220, 151, 0.18);
  --loupewire-status-warning-subtle: rgba(255, 138, 76, 0.18);
  --loupewire-status-danger-subtle: rgba(240, 97, 107, 0.18);
  --loupewire-status-info-subtle: rgba(94, 179, 246, 0.18);

  --loupewire-color-blue-overlay: rgba(91, 155, 255, 0.16);
  --loupewire-color-blue-solid: #5b9bff;
  --loupewire-color-blue-ink: #8dbbff;
  --loupewire-color-green-overlay: rgba(63, 203, 122, 0.16);
  --loupewire-color-green-solid: #3fcb7a;
  --loupewire-color-green-ink: #7fe0a6;
  --loupewire-color-yellow-overlay: rgba(227, 179, 65, 0.16);
  --loupewire-color-yellow-solid: #e3b341;
  --loupewire-color-yellow-ink: #f2cd6e;
  --loupewire-color-red-overlay: rgba(242, 107, 114, 0.16);
  --loupewire-color-red-solid: #f26b72;
  --loupewire-color-red-ink: #ff9ca1;
  --loupewire-color-purple-overlay: rgba(169, 139, 245, 0.16);
  --loupewire-color-purple-solid: #a98bf5;
  --loupewire-color-purple-ink: #c7b4fa;
  --loupewire-color-teal-overlay: rgba(60, 207, 203, 0.16);
  --loupewire-color-teal-solid: #3ccfcb;
  --loupewire-color-teal-ink: #7fe3e0;
  --loupewire-color-pink-overlay: rgba(240, 114, 184, 0.16);
  --loupewire-color-pink-solid: #f072b8;
  --loupewire-color-pink-ink: #f8a5d2;
  --loupewire-color-slate-overlay: rgba(138, 150, 165, 0.16);
  --loupewire-color-slate-solid: #8a96a5;
  --loupewire-color-slate-ink: #b4bec9;

  --loupewire-bg: #101418;
  --loupewire-surface: #171c22;
  --loupewire-surface-raised: #1e252d;
  --loupewire-surface-hover: #242c35;
  --loupewire-border: #2e3742;
  --loupewire-border-strong: #5d6978;
  --loupewire-scrollbar-thumb: #3a444f;
  --loupewire-scrollbar-track: transparent;
  --loupewire-text: #e6e8eb;
  --loupewire-text-muted: #9aa3ae;
  --loupewire-text-disabled: #5c6670;
  --loupewire-text-locked: #a8b1bb;
  --loupewire-status-danger-ink: #101418;
  --loupewire-tooltip-bg: #e6e8eb;
  --loupewire-tooltip-text: #101418;
  --loupewire-modal-backdrop: rgba(16, 20, 24, 0.6);
  --loupewire-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --loupewire-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --loupewire-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44);
}