/* GENERATED FILE - DO NOT EDIT.
   Copied from brand/tokens.css by docs-site/hooks/brand.py.
   Edit the source in brand/ instead. */

/* ==========================================================================
   PhyWare Brand Tokens
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the visual language of every PhyWare property.

   Consumed by:
     - phyware.io      (Astro)          -> src/styles/global.css imports this file
     - docs.phyware.io (MkDocs Material) -> docs-site/hooks/brand.py injects it and
                                            docs/stylesheets/extra.css maps --md-*
                                            variables onto these tokens.

   Never hard-code a hex value outside this file. `test_runner.py --web-lint`
   enforces that rule.

   Naming: every token is prefixed `--pw-` to avoid collisions with the
   `--md-*` namespace owned by the MkDocs Material theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Primitives
   Raw, theme-independent values. Semantic tokens (section 2) reference these.
   Components should reference SEMANTIC tokens, not primitives.
   -------------------------------------------------------------------------- */

:root {
  /* Absolutes */
  --pw-white: #ffffff;
  --pw-black: #000000;

  /* Neutral ramp — the spine of the design system.
     Tuned for a near-black canvas rather than a blue-grey one. */
  --pw-n-0: #ffffff;
  --pw-n-50: #fafafa;
  --pw-n-100: #f5f5f5;
  --pw-n-200: #ebebeb;
  --pw-n-300: #e0e0e0;
  --pw-n-400: #c9c9c9;
  --pw-n-500: #a1a1a1;
  --pw-n-600: #8f8f8f;
  --pw-n-700: #707070;
  --pw-n-800: #454545;
  --pw-n-850: #2e2e2e;
  --pw-n-900: #242424;
  --pw-n-925: #1f1f1f;
  --pw-n-950: #171717;
  --pw-n-975: #111111;
  --pw-n-1000: #0a0a0a;

  /* Accent — a single signal colour. Used for links, focus, active and live
     states. Deliberately scarce: if everything is accented, nothing is. */
  --pw-blue-300: #93c5fd;
  --pw-blue-400: #60a5fa;
  --pw-blue-500: #3b82f6;
  --pw-blue-600: #2563eb;
  --pw-blue-700: #1d4ed8;

  /* Operational status ramp.
     These carry meaning in product diagrams and docs admonitions:
     data is flowing / data is stale / data is missing. */
  --pw-green-400: #4ade80;
  --pw-green-500: #22c55e;
  --pw-amber-400: #fbbf24;
  --pw-amber-500: #f59e0b;
  --pw-red-400: #f87171;
  --pw-red-500: #ef4444;

  /* --------------------------------------------------------------------------
     2. Typography
     -------------------------------------------------------------------------- */

  --pw-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --pw-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  /* Static scale (1rem = 16px) */
  --pw-text-2xs: 0.6875rem; /* 11px — mono eyebrows, badges */
  --pw-text-xs: 0.75rem; /* 12px */
  --pw-text-sm: 0.875rem; /* 14px — UI default */
  --pw-text-base: 1rem; /* 16px — body */
  --pw-text-lg: 1.125rem; /* 18px — lead paragraphs */
  --pw-text-xl: 1.25rem; /* 20px */
  --pw-text-2xl: 1.5rem; /* 24px */
  --pw-text-3xl: 1.875rem; /* 30px */
  --pw-text-4xl: 2.25rem; /* 36px */

  /* Fluid display scale — collapses gracefully without a media query.
     Replaces the old approach of redefining the type scale at 768px. */
  --pw-text-5xl: clamp(2rem, 1.4rem + 3vw, 3rem); /* 32 -> 48 */
  --pw-text-6xl: clamp(2.5rem, 1.6rem + 4.5vw, 3.75rem); /* 40 -> 60 */
  --pw-text-7xl: clamp(2.75rem, 1.5rem + 6vw, 4.5rem); /* 44 -> 72 */

  --pw-leading-none: 1;
  --pw-leading-tight: 1.15;
  --pw-leading-snug: 1.3;
  --pw-leading-normal: 1.5;
  --pw-leading-relaxed: 1.65;
  --pw-leading-prose: 1.75;

  /* Negative tracking on display sizes is the single biggest lever for a
     modern, high-density headline. Positive tracking is reserved for
     uppercase mono eyebrows. */
  --pw-tracking-tighter: -0.04em;
  --pw-tracking-tight: -0.02em;
  --pw-tracking-normal: 0;
  --pw-tracking-wide: 0.02em;
  --pw-tracking-eyebrow: 0.08em;

  --pw-weight-normal: 400;
  --pw-weight-medium: 500;
  --pw-weight-semibold: 600;
  --pw-weight-bold: 700;

  /* --------------------------------------------------------------------------
     3. Spacing — 4px base grid
     -------------------------------------------------------------------------- */

  --pw-space-0: 0;
  --pw-space-1: 0.25rem; /* 4 */
  --pw-space-2: 0.5rem; /* 8 */
  --pw-space-3: 0.75rem; /* 12 */
  --pw-space-4: 1rem; /* 16 */
  --pw-space-5: 1.25rem; /* 20 */
  --pw-space-6: 1.5rem; /* 24 */
  --pw-space-8: 2rem; /* 32 */
  --pw-space-10: 2.5rem; /* 40 */
  --pw-space-12: 3rem; /* 48 */
  --pw-space-16: 4rem; /* 64 */
  --pw-space-20: 5rem; /* 80 */
  --pw-space-24: 6rem; /* 96 */
  --pw-space-32: 8rem; /* 128 */

  /* Vertical rhythm for page sections — fluid so mobile isn't cavernous. */
  --pw-section-y: clamp(4rem, 2rem + 8vw, 7.5rem);

  /* --------------------------------------------------------------------------
     4. Radii, borders, elevation
     -------------------------------------------------------------------------- */

  --pw-radius-xs: 4px;
  --pw-radius-sm: 6px;
  --pw-radius-md: 8px;
  --pw-radius-lg: 12px;
  --pw-radius-xl: 16px;
  --pw-radius-2xl: 24px;
  --pw-radius-full: 9999px;

  --pw-border-width: 1px;

  /* --------------------------------------------------------------------------
     5. Motion
     Every animation that uses these MUST be wrapped in a
     prefers-reduced-motion guard (see section 8).
     -------------------------------------------------------------------------- */

  --pw-duration-instant: 80ms;
  --pw-duration-fast: 150ms;
  --pw-duration-normal: 250ms;
  --pw-duration-slow: 400ms;
  --pw-duration-glacial: 800ms;

  --pw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     6. Layout
     -------------------------------------------------------------------------- */

  --pw-container: 1200px;
  --pw-container-wide: 1400px;
  --pw-container-prose: 720px;
  --pw-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --pw-nav-height: 64px;

  --pw-z-base: 0;
  --pw-z-raised: 10;
  --pw-z-sticky: 100;
  --pw-z-nav: 200;
  --pw-z-overlay: 300;
  --pw-z-modal: 400;
}

/* --------------------------------------------------------------------------
   7. Semantic tokens
   --------------------------------------------------------------------------
   LIGHT THEME is defined on :root so that a page with no theme attribute and
   no JavaScript still renders correctly. The dark theme — which is the
   product default — is applied via [data-theme="dark"], set by an inline
   script in <head> before first paint.

   `[data-md-color-scheme="slate"]` is included so this same file drives dark
   mode on the MkDocs Material docs site, whose theme toggle we do not own.
   -------------------------------------------------------------------------- */

:root,
[data-theme='light'],
[data-md-color-scheme='default'] {
  color-scheme: light;

  /* Surfaces, from furthest back to closest to the reader */
  --pw-bg: var(--pw-n-0);
  --pw-bg-subtle: var(--pw-n-50);
  --pw-bg-inset: var(--pw-n-100);
  --pw-surface: var(--pw-n-0);
  --pw-surface-hover: var(--pw-n-50);

  /* An intentionally inverted band, for high-contrast CTA sections */
  --pw-surface-contrast: var(--pw-n-1000);
  --pw-text-on-contrast: var(--pw-n-0);

  --pw-border: var(--pw-n-200);
  --pw-border-strong: var(--pw-n-300);
  --pw-border-contrast: var(--pw-n-900);

  --pw-text: var(--pw-n-1000);
  --pw-text-muted: var(--pw-n-700);
  --pw-text-subtle: var(--pw-n-600);
  --pw-text-inverse: var(--pw-n-0);

  --pw-accent: var(--pw-blue-600);
  --pw-accent-hover: var(--pw-blue-700);
  --pw-accent-contrast: var(--pw-n-0);
  --pw-accent-subtle: rgb(37 99 235 / 8%);

  --pw-status-live: var(--pw-green-500);
  --pw-status-stale: var(--pw-amber-500);
  --pw-status-gap: var(--pw-red-500);

  /* Buttons — solid dark-on-light in this theme, inverting in dark. */
  --pw-btn-primary-bg: var(--pw-n-1000);
  --pw-btn-primary-text: var(--pw-n-0);
  --pw-btn-primary-bg-hover: var(--pw-n-850);

  /* Depth is carried mainly by borders; shadows stay subtle. */
  --pw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --pw-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 6%), 0 4px 12px -2px rgb(0 0 0 / 8%);
  --pw-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 10%), 0 2px 6px -2px rgb(0 0 0 / 6%);

  /* Decorative background washes */
  --pw-glow: radial-gradient(
    60% 50% at 50% 0%,
    rgb(59 130 246 / 10%) 0%,
    rgb(59 130 246 / 0%) 100%
  );
  --pw-grid-line: rgb(0 0 0 / 5%);

  /* Headline gradient — text fades toward muted at the tail. */
  --pw-text-gradient: linear-gradient(180deg, var(--pw-n-1000) 45%, var(--pw-n-800) 100%);
}

[data-theme='dark'],
[data-md-color-scheme='slate'] {
  color-scheme: dark;

  --pw-bg: var(--pw-n-1000);
  --pw-bg-subtle: var(--pw-n-975);
  --pw-bg-inset: var(--pw-n-950);
  --pw-surface: var(--pw-n-975);
  --pw-surface-hover: var(--pw-n-925);

  --pw-surface-contrast: var(--pw-n-0);
  --pw-text-on-contrast: var(--pw-n-1000);

  --pw-border: var(--pw-n-900);
  --pw-border-strong: var(--pw-n-850);
  --pw-border-contrast: var(--pw-n-200);

  --pw-text: #ededed;
  --pw-text-muted: var(--pw-n-500);
  --pw-text-subtle: var(--pw-n-700);
  --pw-text-inverse: var(--pw-n-1000);

  /* Lighter accent in dark mode: #2563eb fails contrast on a near-black bg. */
  --pw-accent: var(--pw-blue-400);
  --pw-accent-hover: var(--pw-blue-300);
  --pw-accent-contrast: var(--pw-n-1000);
  --pw-accent-subtle: rgb(96 165 250 / 12%);

  --pw-status-live: var(--pw-green-400);
  --pw-status-stale: var(--pw-amber-400);
  --pw-status-gap: var(--pw-red-400);

  --pw-btn-primary-bg: var(--pw-n-0);
  --pw-btn-primary-text: var(--pw-n-1000);
  --pw-btn-primary-bg-hover: var(--pw-n-200);

  --pw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 40%);
  --pw-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 50%), 0 4px 12px -2px rgb(0 0 0 / 40%);
  --pw-shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 60%), 0 2px 6px -2px rgb(0 0 0 / 40%);

  --pw-glow: radial-gradient(
    60% 50% at 50% 0%,
    rgb(96 165 250 / 14%) 0%,
    rgb(96 165 250 / 0%) 100%
  );
  --pw-grid-line: rgb(255 255 255 / 6%);

  --pw-text-gradient: linear-gradient(180deg, #ffffff 45%, var(--pw-n-500) 100%);
}

/* --------------------------------------------------------------------------
   8. Motion preference
   Collapses every duration to a near-zero value, which neutralises any
   transition or animation referencing these tokens without each component
   needing its own media query.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-duration-instant: 1ms;
    --pw-duration-fast: 1ms;
    --pw-duration-normal: 1ms;
    --pw-duration-slow: 1ms;
    --pw-duration-glacial: 1ms;
  }
}

/* --------------------------------------------------------------------------
   9. Forced colors
   `-webkit-text-fill-color: transparent` (used for gradient headlines) renders
   text invisible in Windows High Contrast Mode. Neutralise the effect there.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  :root {
    --pw-text-gradient: none;
  }
}