/* =============================================================================
   ProjectWatchPRO — Design Tokens
   Copy this file verbatim to public/assets/css/tokens.css.
   It is the single source of truth. Component CSS must never hardcode a
   colour, size, radius, shadow, duration or easing value.
   ========================================================================== */

:root {
  /* --- Typography families ------------------------------------------------ */
  --pwp-ff-display: "Ubuntu", "Trebuchet MS", system-ui, sans-serif;
  --pwp-ff-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Type scale (fluid) ------------------------------------------------- */
  --pwp-fs-display: clamp(2.5rem, 6.2vw, 4.5rem);
  --pwp-fs-h1:      clamp(2.125rem, 5vw, 3.5rem);
  --pwp-fs-h2:      clamp(1.75rem, 3.4vw, 2.5rem);
  --pwp-fs-h3:      clamp(1.25rem, 1.8vw, 1.5rem);
  --pwp-fs-h4:      clamp(1.0625rem, 1.4vw, 1.1875rem);
  --pwp-fs-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --pwp-fs-body:    1rem;
  --pwp-fs-small:   0.875rem;
  --pwp-fs-micro:   0.75rem;
  --pwp-fs-eyebrow: 0.75rem;
  --pwp-fs-metric:  clamp(2.25rem, 4.6vw, 3.25rem);
  --pwp-fs-chip:    0.9375rem;

  /* --- Line heights ------------------------------------------------------- */
  --pwp-lh-display: 1.02;
  --pwp-lh-h1: 1.06;
  --pwp-lh-h2: 1.12;
  --pwp-lh-h3: 1.25;
  --pwp-lh-h4: 1.35;
  --pwp-lh-lead: 1.6;
  --pwp-lh-body: 1.65;
  --pwp-lh-tight: 1.3;

  /* --- Tracking ----------------------------------------------------------- */
  --pwp-track-display: -0.02em;
  --pwp-track-h2: -0.015em;
  --pwp-track-h3: -0.01em;
  --pwp-track-eyebrow: 0.14em;
  --pwp-track-label: 0.1em;

  /* --- Weights ------------------------------------------------------------ */
  --pwp-fw-regular: 400;
  --pwp-fw-medium: 500;
  --pwp-fw-semibold: 600;
  --pwp-fw-bold: 700;

  /* --- Graphite surfaces (handoff Revision 4 palette) --------------------- */
  --pwp-surface-950: #050709;
  --pwp-surface-900: #0B1013;
  --pwp-surface-800: #111417;
  --pwp-surface-700: #191D21;
  --pwp-surface-600: #22272C;
  --pwp-border-dark: #2A3036;
  --pwp-border-dark-strong: #3A424A;

  /* --- Paper surfaces ----------------------------------------------------- */
  --pwp-surface-0: #FFFFFF;
  --pwp-surface-50: #F5F5F2;
  --pwp-surface-100: #ECECE7;
  --pwp-border-subtle: #E4E4DE;
  --pwp-border: #D6D6CF;

  /* --- Ink ---------------------------------------------------------------- */
  --pwp-ink-strong: #0B0C0E;
  --pwp-ink: #2C3238;
  --pwp-ink-muted: #4A5058;
  --pwp-ink-inverse: #FFFFFF;
  --pwp-ink-inverse-soft: #C9CFD6;
  --pwp-ink-inverse-muted: #A0A8B2;

  /* --- Accent — handoff brand orange #FF6B00 ------------------------------ */
  --pwp-accent: #FF6B00;         /* fill only; pair with --pwp-ink-strong text */
  --pwp-accent-bright: #FF8A2B;  /* accent text on dark surfaces */
  --pwp-accent-deep: #B84700;    /* accent text on light surfaces */
  --pwp-accent-hover: #FF7F1F;
  --pwp-accent-wash: rgba(255, 107, 0, 0.10);


  /* --- Data colours ------------------------------------------------------- */
  --pwp-data-good: #34D399;
  --pwp-data-good-ink: #15803D;
  --pwp-data-warn: #FBBF24;
  --pwp-data-warn-ink: #92400E;
  --pwp-data-bad: #F87171;
  --pwp-data-bad-ink: #B91C1C;
  --pwp-data-neutral: #7C8592;

  /* --- Scrims & focus ----------------------------------------------------- */
  --pwp-scrim: linear-gradient(180deg, rgba(11,12,14,.15) 0%, rgba(11,12,14,.78) 100%);
  --pwp-scrim-strong: rgba(11, 12, 14, 0.72);
  --pwp-focus: #FF8A2B;

  /* --- Space ------------------------------------------------------------- */
  --pwp-space-1: 4px;
  --pwp-space-2: 8px;
  --pwp-space-3: 12px;
  --pwp-space-4: 16px;
  --pwp-space-5: 24px;
  --pwp-space-6: 32px;
  --pwp-space-7: 40px;
  --pwp-space-8: 56px;
  --pwp-space-9: 80px;
  --pwp-space-10: 112px;
  --pwp-space-11: 160px;

  /* --- Layout ------------------------------------------------------------ */
  --pwp-container: 1300px;
  --pwp-container-narrow: 760px;
  --pwp-container-wide: 1440px;
  --pwp-gutter: clamp(20px, 5vw, 70px);
  --pwp-header-h: 80px;
  --pwp-header-h-condensed: 64px;


  /* --- Radius: soft-square brand geometry -------------------------------- */
  --pwp-radius-xs: 4px;
  --pwp-radius-sm: 8px;
  --pwp-radius-md: 12px;
  --pwp-radius-lg: 12px;
  --pwp-radius-pill: 999px;

  /* --- Borders ------------------------------------------------------------
     --pwp-hairline is mode-aware because --pwp-line is re-declared by every
     .pwp-mode-* class below. Always use the shorthand, never `1px solid #...`.
     ---------------------------------------------------------------------- */
  --pwp-hairline: 1px solid var(--pwp-line);
  --pwp-hairline-strong: 1px solid var(--pwp-line-strong);

  /* --- Layout chrome heights ---------------------------------------------
     Header height is read by scroll-margin-top; sticky-bar height is read by
     body padding on mobile. JS updates --pwp-stickybar-h to the measured px
     value when the bar is shown, and resets it to 0px when hidden.
     ---------------------------------------------------------------------- */
  --pwp-stickybar-h: 0px;



  /* --- Shadows (only four) ----------------------------------------------- */
  --pwp-shadow-sm: 0 1px 2px rgba(11,12,14,.06), 0 1px 1px rgba(11,12,14,.04);
  --pwp-shadow-md: 0 6px 16px -6px rgba(11,12,14,.18);
  --pwp-shadow-lg: 0 24px 48px -16px rgba(11,12,14,.32);
  --pwp-shadow-accent: 0 8px 20px -8px rgba(255,107,0,.45);

  /* --- Motion ------------------------------------------------------------ */
  --pwp-dur-instant: 90ms;
  --pwp-dur-fast: 160ms;
  --pwp-dur-base: 240ms;
  --pwp-dur-slow: 420ms;
  --pwp-dur-reveal: 620ms;
  --pwp-dur-draw: 900ms;
  --pwp-dur-count: 1100ms;
  --pwp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pwp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pwp-ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --pwp-stagger: 70ms;
  --pwp-reveal-y: 20px;

  /* --- Craft layer motion (spec 15-improvements/00-craft-layer.md) --------
     Three durations, two curves. Nothing on the site may invent its own. */
  --pwp-dur-craft-micro: 160ms;  /* icon rotate, arrow slide, colour change */
  --pwp-dur-craft-base:  300ms;  /* hover lift, accordion open, rule draw */
  --pwp-dur-craft-slow:  560ms;  /* section reveal, disclosure layer */
  --pwp-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);   /* the "nothing snaps" curve */

  /* --- Glass (frosted panels; max three blurred layers per screen) -------- */
  --pwp-glass-bg: color-mix(in oklab, var(--pwp-surface-0) 62%, transparent);
  --pwp-glass-bg-dark: color-mix(in oklab, var(--pwp-surface-900) 58%, transparent);
  --pwp-glass-blur: 14px;
  --pwp-glass-edge: var(--pwp-line);
  --pwp-glass-sheen: color-mix(in oklab, var(--pwp-surface-0) 18%, transparent);

  /* --- Z-index ----------------------------------------------------------- */
  --pwp-z-base: 0;
  --pwp-z-raised: 10;
  --pwp-z-sticky: 100;
  --pwp-z-header: 200;
  --pwp-z-drawer: 300;
  --pwp-z-modal: 400;
  --pwp-z-toast: 500;

  /* --- Semantic aliases (default = paper mode) --------------------------- */
  --pwp-bg: var(--pwp-surface-0);
  --pwp-fg: var(--pwp-ink-strong);
  --pwp-fg-muted: var(--pwp-ink-muted);
  --pwp-card: var(--pwp-surface-0);
  --pwp-line: var(--pwp-border-subtle);
  --pwp-line-strong: var(--pwp-border);
  --pwp-accent-text: var(--pwp-accent-deep);
  --pwp-good: var(--pwp-data-good-ink);
  --pwp-warn: var(--pwp-data-warn-ink);
  --pwp-bad: var(--pwp-data-bad-ink);
}

/* =============================================================================
   Section modes — remap the aliases. Component CSS never branches on
   background; it only reads --pwp-bg / --pwp-fg / --pwp-card / --pwp-line /
   --pwp-accent-text.
   ========================================================================== */

.pwp-mode-dark {
  --pwp-bg: var(--pwp-surface-900);
  --pwp-fg: var(--pwp-ink-inverse);
  --pwp-fg-muted: var(--pwp-ink-inverse-muted);
  --pwp-card: var(--pwp-surface-700);
  --pwp-line: var(--pwp-border-dark);
  --pwp-line-strong: var(--pwp-border-dark-strong);
  --pwp-accent-text: var(--pwp-accent-bright);
  --pwp-good: var(--pwp-data-good);
  --pwp-warn: var(--pwp-data-warn);
  --pwp-bad: var(--pwp-data-bad);
}

.pwp-mode-graphite {
  --pwp-bg: var(--pwp-surface-800);
  --pwp-fg: var(--pwp-ink-inverse);
  --pwp-fg-muted: var(--pwp-ink-inverse-muted);
  --pwp-card: var(--pwp-surface-700);
  --pwp-line: var(--pwp-border-dark);
  --pwp-line-strong: var(--pwp-border-dark-strong);
  --pwp-accent-text: var(--pwp-accent-bright);
  --pwp-good: var(--pwp-data-good);
  --pwp-warn: var(--pwp-data-warn);
  --pwp-bad: var(--pwp-data-bad);
}

.pwp-mode-paper {
  --pwp-bg: var(--pwp-surface-0);
  --pwp-fg: var(--pwp-ink-strong);
  --pwp-fg-muted: var(--pwp-ink-muted);
  --pwp-card: var(--pwp-surface-0);
  --pwp-line: var(--pwp-border-subtle);
  --pwp-line-strong: var(--pwp-border);
  --pwp-accent-text: var(--pwp-accent-deep);
  --pwp-good: var(--pwp-data-good-ink);
  --pwp-warn: var(--pwp-data-warn-ink);
  --pwp-bad: var(--pwp-data-bad-ink);
}

.pwp-mode-paper-alt {
  --pwp-bg: var(--pwp-surface-50);
  --pwp-fg: var(--pwp-ink-strong);
  --pwp-fg-muted: var(--pwp-ink-muted);
  --pwp-card: var(--pwp-surface-0);
  --pwp-line: var(--pwp-border);
  --pwp-line-strong: var(--pwp-border);
  --pwp-accent-text: var(--pwp-accent-deep);
  --pwp-good: var(--pwp-data-good-ink);
  --pwp-warn: var(--pwp-data-warn-ink);
  --pwp-bad: var(--pwp-data-bad-ink);
}

/* Accent mode — used once per page, for the final ask. Ink stays near-black:
   white text on --pwp-accent fails AA, ink-strong passes at 7.5:1. */
.pwp-mode-accent {
  --pwp-bg: var(--pwp-accent);
  --pwp-fg: var(--pwp-ink-strong);
  --pwp-fg-muted: color-mix(in oklab, var(--pwp-ink-strong) 80%, var(--pwp-accent));
  --pwp-card: var(--pwp-surface-0);
  --pwp-line: color-mix(in oklab, var(--pwp-ink-strong) 22%, var(--pwp-accent));
  --pwp-line-strong: color-mix(in oklab, var(--pwp-ink-strong) 46%, var(--pwp-accent));
  --pwp-accent-text: var(--pwp-ink-strong);
  --pwp-focus: var(--pwp-ink-strong);
  --pwp-good: var(--pwp-data-good-ink);
  --pwp-warn: var(--pwp-data-warn-ink);
  --pwp-bad: var(--pwp-data-bad-ink);
}

/* Every mode paints itself. */
.pwp-mode-dark,
.pwp-mode-graphite,
.pwp-mode-paper,
.pwp-mode-paper-alt,
.pwp-mode-accent {
  background-color: var(--pwp-bg);
  color: var(--pwp-fg);
}


/* =============================================================================
   Reduced motion — global kill switch. Any new animation must respect this.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pwp-dur-instant: 1ms;
    --pwp-dur-fast: 1ms;
    --pwp-dur-base: 1ms;
    --pwp-dur-slow: 1ms;
    --pwp-dur-reveal: 1ms;
    --pwp-dur-draw: 1ms;
    --pwp-dur-count: 1ms;
    --pwp-stagger: 0ms;
    --pwp-reveal-y: 0px;
    --pwp-dur-craft-micro: 1ms;
    --pwp-dur-craft-base: 1ms;
    --pwp-dur-craft-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}