/* ============================================================================
   TechPlainly design tokens — SINGLE SOURCE OF TRUTH

   Used by two things that must not drift apart:
     · this website          — styles.css maps its semantic names onto these
     · the brand kit canvas  — the Tokens board documents these same values,
                               and the animation frames are built from them

   Palette origin: nine colours read out of the source brand palette PDF.
   --tp-signal is the one addition (see the Tokens board for why).

   If you change a value here, change it on the Tokens board too.
   ========================================================================= */

:root {

  /* ---- palette -------------------------------------------------------- */
  --tp-navy-900:   #05070f;   /* page / video base            (pdf) */
  --tp-navy-800:   #0a0e1a;   /* section band                 (pdf) */
  --tp-navy-700:   #0e1424;   /* card / panel                 (pdf) */
  --tp-navy-600:   #1a2135;   /* hairline on dark          derived */
  --tp-navy-500:   #27314a;   /* border on dark            derived */
  --tp-ink:        #111318;   /* ink on light                 (pdf) */
  --tp-ink-soft:   #3b414f;   /* secondary ink on light    derived */
  --tp-grey:       #8a8f9c;   /* muted label, both themes     (pdf) */
  --tp-line:       #e3e6ec;   /* hairline on light         derived */
  --tp-line-2:     #ccd2dd;   /* border on light           derived */
  --tp-off-white:  #fafafa;   /* headline on dark             (pdf) */
  --tp-white:      #ffffff;   /* surface on light             (pdf) */
  --tp-blue:       #185df1;   /* primary — use on LIGHT       (pdf) */
  --tp-blue-light: #4a87fa;   /* primary — use on DARK        (pdf) */
  --tp-blue-deep:  #0b45c4;   /* primary hover on light    derived */
  --tp-blue-tint:  #e7effe;   /* 8% primary on light       derived */
  --tp-blue-dim:   #0f1e3d;   /* primary wash on dark      derived */
  --tp-signal:     #f96be2;   /* signal — max one use per frame  + */
  --tp-mist:       #f0f2f7;   /* section band on light     derived */
  --tp-code-ink:   #e6eaf2;   /* text on code surfaces     derived */
  --tp-ink-dim:    #c2c8d6;   /* secondary text on dark    derived */

  /* utility — not brand colours, but they must not be re-invented per file */
  --tp-success:    #86efac;   /* "Copied" confirmation             */
  --tp-youtube:    #ff0033;   /* platform colour, do not restyle   */
  --tp-youtube-2:  #d80029;   /* platform colour, hover            */

  /* Contrast rule, not a suggestion:
     --tp-blue fails AA as body text on --tp-navy-900.
     On dark use --tp-blue-light (5.9:1). On light use --tp-blue (5.1:1). */

  /* ---- type scale — ratio 1.25 ---------------------------------------- */
  /* WEB, base 16px */
  --tp-text-2xs:  10px;
  --tp-text-xs:   13px;
  --tp-text-sm:   16px;   /* body */
  --tp-text-md:   20px;
  --tp-text-lg:   25px;   /* h3 */
  --tp-text-xl:   31px;   /* h2 */
  --tp-text-2xl:  39px;
  --tp-text-3xl:  49px;   /* h1 */
  --tp-text-4xl:  61px;
  --tp-text-5xl:  76px;   /* display */

  /* VIDEO at 1920×1080 — the web scale × 2.4, same ratio.
     These are the sizes to type into After Effects. */
  --tp-vtext-xs:   31px;  /* mono labels, kickers */
  --tp-vtext-sm:   38px;  /* body / caption */
  --tp-vtext-md:   48px;  /* sub-headline */
  --tp-vtext-lg:   60px;
  --tp-vtext-xl:   74px;
  --tp-vtext-2xl:  94px;
  --tp-vtext-3xl: 118px;  /* title card headline */
  --tp-vtext-4xl: 146px;
  --tp-vtext-5xl: 183px;  /* full-frame statement */

  /* ---- spacing — one scale, two bases --------------------------------- */
  /* WEB, base 8px */
  --tp-space-1:    8px;
  --tp-space-2:   16px;
  --tp-space-3:   24px;
  --tp-space-4:   32px;
  --tp-space-6:   48px;
  --tp-space-8:   64px;
  --tp-space-12:  96px;
  --tp-space-16: 128px;

  /* VIDEO, base 20px */
  --tp-vspace-1:   20px;
  --tp-vspace-2:   40px;
  --tp-vspace-3:   60px;
  --tp-vspace-4:   80px;
  --tp-vspace-6:  120px;  /* frame margin — clears 5% title-safe (96px) */
  --tp-vspace-8:  160px;
  --tp-vspace-12: 240px;
  --tp-vspace-16: 320px;

  /* ---- radius --------------------------------------------------------- */
  --tp-radius-sm:  6px;
  --tp-radius:    10px;
  --tp-radius-lg: 18px;
  --tp-radius-pill: 999px;

  /* ---- motion --------------------------------------------------------- */
  /* Durations. Frame counts are what you key in After Effects. */
  --tp-dur-fast:  200ms;  /*  6f @30fps · 12f @60fps — exits, hovers   */
  --tp-dur-base:  400ms;  /* 12f @30fps · 24f @60fps — most moves      */
  --tp-dur-slow:  700ms;  /* 21f @30fps · 42f @60fps — titles, reveals */
  --tp-dur-hold: 2000ms;  /* 60f @30fps — how long a card sits still   */
  --tp-stagger:   120ms;  /*  4f @30fps — between staggered elements   */

  /* Easing. Two curves, and only two.
     In After Effects: Easy Ease (F9) then match the influence noted. */
  --tp-ease-out:    cubic-bezier(0.20, 0.70, 0.30, 1.00); /* AE: out influence ~70% */
  --tp-ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1.00); /* AE: both ~65%          */
  /* Exits are linear and fast. Don't ease something off screen. */

  /* ---- elevation ------------------------------------------------------ */
  --tp-shadow-light: 0 1px 2px rgba(17,19,24,.05), 0 8px 24px -12px rgba(17,19,24,.16);
  --tp-shadow-dark:  0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.75);
  --tp-shadow-video: 0 24px 60px -20px rgba(0,0,0,.7);

  /* ---- type families -------------------------------------------------- */
  --tp-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}