/* ==========================================================================
   ProfessNow — Design Tokens
   Single source of truth for colour, type, space, radius, elevation, motion.
   Every other file in public/css/professnow/ consumes these variables.
   ========================================================================== */

:root {
  /* ---- Brand green ----------------------------------------------------- */
  --pn-green: #16A34A;
  --pn-green-hover: #15903F;
  --pn-green-active: #15803D;
  --pn-green-deep: #15803D;
  --pn-green-darker: #126D34;
  --pn-green-soft: #F0FDF4;
  --pn-green-soft-2: #DCFCE7;
  --pn-green-border: #BBF7D0;
  --pn-green-ring: rgba(22, 163, 74, .28);
  --pn-green-glow: rgba(22, 163, 74, .18);
  /* Green tuned for legibility on near-black surfaces */
  --pn-green-on-dark: #4ADE80;

  /* ---- Near-black ------------------------------------------------------ */
  --pn-black: #0A0A0A;
  --pn-black-2: #111111;
  --pn-black-3: #171717;
  --pn-black-4: #1F1F1F;

  /* ---- Neutrals -------------------------------------------------------- */
  --pn-white: #FFFFFF;
  --pn-gray-50: #FAFAFA;
  --pn-gray-100: #F5F5F5;
  --pn-gray-150: #EFEFEF;
  --pn-gray-200: #E5E5E5;
  --pn-gray-300: #D4D4D4;
  --pn-gray-400: #A3A3A3;
  --pn-gray-500: #737373;
  --pn-gray-600: #525252;
  --pn-gray-700: #404040;

  /* Matches the flat background baked into the hero character video so the
     footage blends into the page instead of reading as a video box. */
  --pn-stage-bg: #F2F2F2;

  /* ---- Semantic surfaces ---------------------------------------------- */
  --pn-surface: #FFFFFF;
  --pn-surface-sunken: #FAFAFA;
  --pn-surface-muted: #F5F5F5;
  --pn-surface-dark: #0A0A0A;

  --pn-text: #111111;
  --pn-text-strong: #0A0A0A;
  --pn-text-muted: #525252;
  --pn-text-subtle: #737373;
  --pn-text-invert: #FFFFFF;
  --pn-text-invert-muted: rgba(255, 255, 255, .68);

  --pn-border: #E5E5E5;
  --pn-border-strong: #D4D4D4;
  --pn-border-dark: rgba(255, 255, 255, .12);

  /* ---- Status ---------------------------------------------------------- */
  --pn-success: #16A34A;
  --pn-success-soft: #F0FDF4;
  --pn-warning: #B45309;
  --pn-warning-soft: #FFFBEB;
  --pn-danger: #DC2626;
  --pn-danger-soft: #FEF2F2;
  --pn-star: #F59E0B;

  /* ---- Typography ------------------------------------------------------ */
  --pn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pn-font-display: "Plus Jakarta Sans", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pn-display: 800 clamp(2.5rem, 1.5rem + 3.6vw, 4rem) / 1.06 var(--pn-font-display);
  --pn-h1: 800 clamp(2rem, 1.35rem + 2.4vw, 3rem) / 1.12 var(--pn-font-display);
  --pn-h2: 700 clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem) / 1.16 var(--pn-font-display);
  --pn-h3: 700 clamp(1.15rem, 1rem + .6vw, 1.375rem) / 1.32 var(--pn-font-display);
  --pn-h4: 600 1.0625rem/1.4 var(--pn-font-display);

  --pn-body-lg: 400 1.0625rem/1.7 var(--pn-font);
  --pn-body: 400 .9375rem/1.68 var(--pn-font);
  --pn-body-sm: 400 .875rem/1.6 var(--pn-font);
  --pn-caption: 400 .8125rem/1.5 var(--pn-font);
  --pn-label: 600 .8125rem/1.3 var(--pn-font);
  --pn-button: 600 .9375rem/1 var(--pn-font);
  --pn-eyebrow: 600 .75rem/1.2 var(--pn-font);

  --pn-tracking-tight: -.02em;
  --pn-tracking-eyebrow: .08em;

  /* ---- Spacing scale --------------------------------------------------- */
  --pn-s1: 4px;
  --pn-s2: 8px;
  --pn-s3: 12px;
  --pn-s4: 16px;
  --pn-s5: 20px;
  --pn-s6: 24px;
  --pn-s8: 32px;
  --pn-s10: 40px;
  --pn-s12: 48px;
  --pn-s16: 64px;
  --pn-s20: 80px;
  --pn-s24: 96px;
  --pn-s32: 128px;

  /* Vertical rhythm for full-bleed page sections */
  --pn-section-y: clamp(56px, 4vw + 32px, 104px);

  /* ---- Radius ---------------------------------------------------------- */
  --pn-r-xs: 6px;
  --pn-r-sm: 8px;
  --pn-r-md: 12px;
  --pn-r-lg: 16px;
  --pn-r-card: 18px;
  --pn-r-xl: 24px;
  --pn-r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --pn-shadow-xs: 0 1px 2px rgba(10, 10, 10, .05);
  --pn-shadow-sm: 0 1px 3px rgba(10, 10, 10, .07), 0 1px 2px rgba(10, 10, 10, .04);
  --pn-shadow-card: 0 2px 6px rgba(10, 10, 10, .05), 0 1px 2px rgba(10, 10, 10, .04);
  --pn-shadow-hover: 0 12px 28px rgba(10, 10, 10, .10), 0 4px 8px rgba(10, 10, 10, .05);
  --pn-shadow-float: 0 18px 40px rgba(10, 10, 10, .12), 0 6px 14px rgba(10, 10, 10, .06);
  --pn-shadow-modal: 0 28px 64px rgba(10, 10, 10, .20);
  --pn-shadow-green: 0 8px 20px rgba(22, 163, 74, .26), 0 2px 6px rgba(22, 163, 74, .16);
  --pn-shadow-green-lg: 0 14px 32px rgba(22, 163, 74, .32), 0 4px 10px rgba(22, 163, 74, .18);

  /* ---- Motion ---------------------------------------------------------- */
  --pn-fast: 140ms;
  --pn-normal: 240ms;
  --pn-slow: 480ms;
  --pn-reveal: 700ms;

  --pn-ease-out: cubic-bezier(.22, .8, .36, 1);
  --pn-ease-in-out: cubic-bezier(.5, 0, .2, 1);
  --pn-ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* ---- Layout ---------------------------------------------------------- */
  --pn-container: 1200px;
  --pn-container-wide: 1320px;
  --pn-container-narrow: 880px;
  --pn-gutter: clamp(16px, 4vw, 32px);
  --pn-navbar-h: 76px;
  --pn-navbar-h-scrolled: 64px;
}

/* Motion is decoration, never a dependency. Collapsing the durations keeps
   every transition-driven end state intact while removing the movement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pn-fast: 1ms;
    --pn-normal: 1ms;
    --pn-slow: 1ms;
    --pn-reveal: 1ms;
  }
}