/* =============================================================================
   Pepvela V3 design tokens (canonical)
   Color system LOCKED by the CEO on 2026-09-29:
   Stitch V3 DNA + brighter purple + Pepvela identity.
   Purple = identity. Dark tones = depth. Lavender = light, biology, intelligence.

   This file is copied byte for byte into:
     pepvela-site  css/v3-tokens.css
     pepvela-shop  css/v3-tokens.css
     pepvela-app   design-system/tokens/v3.css
   A test in each repo pins its SHA-256, so any drift fails the suite. To change
   a token: edit the canonical file, copy it to all three repos, update the
   three pinned hashes, in one change.

   Every token uses the --pv3- prefix. The App already defines 186 --pv-*
   variables with other meanings; V3 names never collide with them.

   Rules (contrast is WCAG 2.x, measured):
   - Primary purple fills primary CTAs with white text (5.7:1) and colors
     links on light (5.4:1). On dark it is for shapes and large type only.
   - Bright accent carries text only on the deep background (4.9:1). Use it
     for signals, active marks, focus rings, highlights and vial light,
     never for white-text buttons (4.0:1) or text on light (3.8:1).
   - Lavender is the accent text on dark (8.4 to 10.5:1). On light it is a
     wash behind dark text, never text or a meaningful shape (1.75:1).
   - Purple is identity, not wallpaper: no purple page backgrounds and no
     generic purple gradients behind content. Dark gradients stay within
     depth and deep. The signal gradient is for thin lines and meters.
   - One glow per viewport. Biology is never colored good or bad; the error
     tone is for form errors and destructive actions only.
   - Derived tones are alpha or mixes of the locked colors, never new hues.
   ============================================================================= */

:root {
  /* 1. Locked brand colors. Change only with a new CEO decision. */
  --pv3-purple: #7C3AED;                        /* Primary Purple */
  --pv3-purple-bright: #A855F7;                 /* Bright Accent Purple */
  --pv3-lavender: #C4B5FD;                      /* Light Lavender */
  --pv3-deep: #0A0B1E;                          /* Deep Background */
  --pv3-depth: #1A0F3D;                         /* Purple Shadow / Depth */
  --pv3-surface: #F8F9FC;                       /* Light Surface */
  --pv3-text: #111827;                          /* Primary Text */
  --pv3-white: #FFFFFF;                         /* neutral: cards on light, text on purple */

  /* 2. Light surfaces: CRM, research, catalog, tables, forms */
  --pv3-bg-light: var(--pv3-surface);
  --pv3-card: var(--pv3-white);
  --pv3-text-muted: rgba(17, 24, 39, 0.68);     /* 6.0:1 on surface, 6.1:1 on card */
  --pv3-line: rgba(17, 24, 39, 0.10);           /* hairline */
  --pv3-line-strong: rgba(17, 24, 39, 0.18);
  --pv3-link: var(--pv3-purple);                /* 5.4:1 on surface */
  --pv3-tint: rgba(196, 181, 253, 0.28);        /* lavender wash: chips, soft backgrounds; text on it 14.5:1 */
  --pv3-selected: rgba(124, 58, 237, 0.08);     /* selected row */
  --pv3-selected-line: rgba(124, 58, 237, 0.40);

  /* 3. Dark surfaces: App shell, cinematic bands, CRM rail */
  --pv3-bg-dark: var(--pv3-deep);
  --pv3-panel-dark: var(--pv3-depth);
  --pv3-panel-raised: #281C4C;                  /* depth 92% + lavender 8% */
  --pv3-on-dark: var(--pv3-surface);            /* 18.5:1 on deep, 16.9:1 on depth */
  --pv3-on-dark-muted: rgba(248, 249, 252, 0.70); /* 9.2:1 on deep, 8.7:1 on depth */
  --pv3-on-dark-accent: var(--pv3-lavender);    /* labels, links, data on dark */
  --pv3-line-dark: rgba(196, 181, 253, 0.14);

  /* 4. Action */
  --pv3-action: var(--pv3-purple);              /* white text 5.7:1 */
  --pv3-action-hover: #6A32CD;                  /* purple 82% + depth 18%; white text 7.1:1 */
  --pv3-action-pressed: #5A2BAF;                /* purple 65% + depth 35%; white text 8.8:1 */
  --pv3-on-action: var(--pv3-white);
  --pv3-focus: var(--pv3-purple-bright);        /* 2px ring: 3.8:1 on light, 4.9:1 on deep */

  /* 5. Signals and biology: data visualization, biological layers */
  --pv3-signal: var(--pv3-purple-bright);
  --pv3-signal-strong: var(--pv3-purple);
  --pv3-signal-soft: var(--pv3-lavender);
  --pv3-signal-wash: rgba(196, 181, 253, 0.18);

  /* 6. Depth, light and gradients */
  --pv3-shadow: 0 1px 2px rgba(26, 15, 61, 0.08), 0 8px 24px -12px rgba(26, 15, 61, 0.22);
  --pv3-shadow-dark: 0 16px 40px -16px rgba(10, 11, 30, 0.80);
  --pv3-glow: 0 0 32px rgba(168, 85, 247, 0.35); /* one element per viewport */
  --pv3-gradient-depth: linear-gradient(180deg, #1A0F3D 0%, #0A0B1E 100%);
  --pv3-gradient-cinematic: radial-gradient(70% 60% at 75% 0%, rgba(124, 58, 237, 0.30) 0%, rgba(124, 58, 237, 0) 62%), linear-gradient(180deg, #1A0F3D 0%, #0A0B1E 80%);
  --pv3-gradient-signal: linear-gradient(90deg, #7C3AED 0%, #A855F7 100%); /* thin lines, ribbons, meters */

  /* 7. Status: operational only */
  --pv3-error: #B42318;                         /* form errors, destructive actions; 6.2:1 on surface */

  /* 8. Wordmark */
  --pv3-wordmark-pep: var(--pv3-depth);
  --pv3-wordmark-vela: var(--pv3-purple);
  --pv3-wordmark-pep-on-dark: var(--pv3-surface);
  --pv3-wordmark-vela-on-dark: var(--pv3-purple-bright);

  /* 9. Typography. LOCKED by the CEO on 2026-09-29. Plus Jakarta Sans
     (self-hosted) is the one product typeface on every surface: headings,
     body, buttons, navigation, forms, cards, dashboards and data. The serif
     is for the Pepvela wordmark only, never for interface headings or body. */
  --pv3-font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pv3-font-display: var(--pv3-font-ui);       /* headings use the product sans */
  --pv3-font-wordmark: Georgia, "Times New Roman", Times, serif; /* wordmark only */
  --pv3-fs-display: clamp(38px, 3vw + 26px, 56px);
  --pv3-fs-h1: clamp(30px, 1.6vw + 24px, 40px);
  --pv3-fs-h2: clamp(26px, 1vw + 22px, 32px);
  --pv3-fs-h3: clamp(20px, 0.32vw + 18.8px, 22px);
  --pv3-fs-body: 16px;
  --pv3-fs-small: 14px;
  --pv3-fs-label: 12px;                         /* caps; nothing smaller ships */
  --pv3-fs-metric: clamp(36px, 1.9vw + 28.9px, 48px);
  --pv3-tracking-label: 0.06em;

  /* 10. Space, shape, motion */
  --pv3-space-1: 4px;
  --pv3-space-2: 8px;
  --pv3-space-3: 12px;
  --pv3-space-4: 16px;
  --pv3-space-5: 24px;
  --pv3-space-6: 32px;
  --pv3-space-7: 40px;
  --pv3-space-8: 64px;
  --pv3-space-9: 96px;
  --pv3-radius-xs: 4px;
  --pv3-radius-sm: 8px;
  --pv3-radius-md: 12px;                        /* inputs, CRM cards */
  --pv3-radius-lg: 16px;                        /* cards */
  --pv3-radius-xl: 24px;
  --pv3-radius-full: 999px;                     /* pills */
  --pv3-dur-press: 120ms;                       /* interfaces respond quickly */
  --pv3-dur-ui: 180ms;
  --pv3-dur-bio: 900ms;                         /* biology moves slowly */
  --pv3-ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pv3-ease-bio: cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pv3-dur-press: 0ms;
    --pv3-dur-ui: 0ms;
    --pv3-dur-bio: 200ms;                       /* cross-fades only */
  }
}