/* ==========================================================================
   Praktivo — implementation tokens (T-WS08-001)
   Single declaration layer for the public site. Values are the ratified
   WS-09 decisions only:
     palette .................. T-WS09-002 / brand-kit.md §3
     type scale ............... T-WS09-003 / brand-kit.md §4
     spacing, radius,
     elevation, motion ........ brand-kit.md §5
   Load before praktivo.css. Templates and components consume these names via
   var(); do not re-declare values elsewhere.
   ========================================================================== */

:root {
  /* Palette — 12 role groups / 14 concrete variables (brand-kit.md §3.1) */
  --pv-bg: #080808;
  --pv-surface: #111111;
  --pv-surface-2: #171717;
  --pv-line: rgba(255, 255, 255, 0.09);
  --pv-line-strong: rgba(255, 255, 255, 0.18);
  --pv-text: #f2f4f8;
  --pv-muted: #b3b3b3;
  --pv-text-dim: #7f8aa6;
  --pv-primary: #3d6bff;
  --pv-primary-soft: rgba(61, 107, 255, 0.12);
  --pv-secondary: #4d30ff;
  --pv-success: #34d399;
  --pv-attention: #fbbf24;
  --pv-danger: #f87171;

  /* Light variant for email and admin surfaces (brand-kit.md §3.4).
     Target mapping only; consumer migration stays with T-WS09-007/008. */
  --pv-l-bg: #ffffff;
  --pv-l-surface: #f6f8fc;
  --pv-l-surface-2: #eef2f8;
  --pv-l-line: #d9dee8;
  --pv-l-line-strong: #6b7280;
  --pv-l-text: #14171c;
  --pv-l-muted: #4b5563;
  --pv-l-text-dim: #596579;
  --pv-l-primary: #2b50d9;
  --pv-l-primary-soft: rgba(43, 80, 217, 0.10);
  --pv-l-secondary: #4d30ff;
  --pv-l-success: #0b6841;
  --pv-l-attention: #8a5a00;
  --pv-l-danger: #b3261e;

  /* Type — families and the 7-step scale (brand-kit.md §4).
     Step weights: 1 PJS 600, 2 PJS 500, 3 PJS 400, 4 PJS 400,
     5 Outfit 700, 6 Outfit 800, 7 Outfit 900. */
  --pv-font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --pv-font-head: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --pv-type-1: 11px; /* micro-label, badge, eyebrow */
  --pv-type-2: 13px; /* meta, nav, caption */
  --pv-type-3: 15px; /* body, form fields */
  --pv-type-4: 17px; /* lead, hero subcopy */
  --pv-type-5: 20px; /* h4, card title */
  --pv-type-6: 28px; /* h3, section title */
  --pv-type-7: 44px; /* h2/h1 display; clamp(34px, 6vw, 64px) hero */

  --pv-leading-1: 1.4;
  --pv-leading-2: 1.5;
  --pv-leading-3: 1.6;
  --pv-leading-4: 1.6;
  --pv-leading-5: 1.3;
  --pv-leading-6: 1.15;
  --pv-leading-7: 1.05;

  --pv-tracking-1: 0.08em;
  --pv-tracking-2: 0;
  --pv-tracking-3: 0;
  --pv-tracking-4: -0.01em;
  --pv-tracking-5: -0.01em;
  --pv-tracking-6: -0.02em;
  --pv-tracking-7: -0.03em;

  /* Spacing — one 4px-based scale plus semantic rhythm (brand-kit.md §5) */
  --pv-space-1: 4px;
  --pv-space-2: 8px;
  --pv-space-3: 12px;
  --pv-space-4: 16px;
  --pv-space-5: 24px;
  --pv-space-6: 32px;
  --pv-space-7: 48px;
  --pv-space-8: 88px;
  --pv-section-y: 88px;
  --pv-card-pad: 32px;
  --pv-grid-gap: 24px;
  --pv-hero-top: 150px;
  --pv-hero-bottom: 80px;

  /* Radius — three values replace the 15-value sprawl (F-BRAND-004) */
  --pv-radius-pill: 999px;
  --pv-radius-card: 24px;
  --pv-radius-panel: 32px;

  /* Elevation — one pair plus the single glow allowance */
  --pv-elev-1: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --pv-elev-2: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  --pv-glow: 0 0 40px rgba(61, 107, 255, 0.28);

  /* Motion (brand-kit.md §5) */
  --pv-motion-fast: 150ms;
  --pv-motion-standard: 250ms;
  --pv-motion-slow: 450ms;
  --pv-motion-ease: cubic-bezier(.22,.61,.36,1);

  /* Legacy film-grain texture, retained for byte-identical rendering until
     the section treatment is redesigned. Not a colour or type token. */
  --pv-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  :root {
    --pv-section-y: 56px;
  }
}

/* ==========================================================================
   Token-backed colour utilities (T-WS08-003)
   The inline-colour codemod (scripts/migrate-inline-styles.mjs) rewrites the
   known colour literals in templates to these classes; templates must not
   hard-code hex values. Scoped with body.pv so they out-rank
   `body.pv a { color: inherit }` and `body.pv p` without depending on load
   order. `.pv-link` implements the ratified brand-kit §3.1 mapping
   `#9bb4ff` -> `--pv-text-dim` with an underline (never colour alone).
   ========================================================================== */
body.pv .pv-link { color: var(--pv-text-dim); text-decoration: underline; text-underline-offset: 3px; }
body.pv .pv-color-primary { color: var(--pv-primary); }
body.pv .pv-color-secondary { color: var(--pv-secondary); }
body.pv .pv-color-text { color: var(--pv-text); }
body.pv .pv-color-muted { color: var(--pv-muted); }
body.pv .pv-color-dim { color: var(--pv-text-dim); }
body.pv .pv-color-success { color: var(--pv-success); }
body.pv .pv-color-attention { color: var(--pv-attention); }
body.pv .pv-color-danger { color: var(--pv-danger); }