/* ===================================================================
   TransMedia — Theme Variables
   -------------------------------------------------------------------
   Single source of truth for the site's colors, typography and
   surfaces. Edit a value here and it cascades everywhere it is used.

   Conventions:
     --color-*   brand / palette primitives (the raw colors)
     --text-*    semantic text colors (what color text should be)
     --bg-*      surface / background colors
     --fs-*      font sizes (type scale)
     --fw-*      font weights
     --font-*    font families
=================================================================== */

:root {
  /* ---------------------------------------------------------------
     Brand palette (primitives)
  --------------------------------------------------------------- */
  --color-primary:        #3264f5;   /* TransMedia blue            */
  --color-primary-deep:   #385aef;   /* slightly deeper blue       */
  --color-secondary:      #7202bb;   /* TransMedia purple          */
  --color-accent:         var(--color-primary); /* on-brand accent (was cyan) */

  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-ink:            #151515;   /* near-black for headings    */
  --color-ink-soft:       #232323;

  /* Brand gradient (blue -> purple) used across headings, buttons,
     overlays. Change the two stops to re-tint the whole site.      */
  --gradient-brand: linear-gradient(
    to right,
    var(--color-primary) 2%,
    var(--color-secondary) 82%
  );
  /* Button variant has a 3-stop loop so the hover can slide.       */
  --gradient-brand-btn: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-secondary) 51%,
    var(--color-primary) 100%
  );

  /* ---------------------------------------------------------------
     Text colors (semantic) — tuned for WCAG-AA contrast
  --------------------------------------------------------------- */
  --text-heading:    #1a1a1a;        /* headings on light surfaces */
  --text-body:       #4a4a4a;        /* body copy — darker than the
                                        old #6d6d6d for legibility  */
  --text-muted:      #6b6b6b;        /* captions / secondary text  */
  --text-on-dark:        #ffffff;    /* text over dark / gradient  */
  --text-on-dark-muted:  rgba(255, 255, 255, 0.82);
  --text-link:       var(--color-primary-deep);
  --text-link-hover: var(--color-secondary);

  /* ---------------------------------------------------------------
     Surfaces / backgrounds
  --------------------------------------------------------------- */
  --bg-body:      #ffffff;
  --bg-light:     #f6f8fc;           /* soft tinted section bg     */
  --bg-subtle:    #f5f7fc;
  /* Brand-tinted panel behind the History product shot — deeper than
     --bg-light so the section reads as separate from the light section
     that follows it.                                                   */
  --bg-showcase:  linear-gradient(135deg, #e8ecff 0%, #efe6fb 100%);
  --bg-dark:      #1d1d21;
  --bg-black:     #000000;
  --bg-blue:      var(--color-accent);

  /* Form / UI bits */
  --border-color:      #e2e2e2;
  --placeholder-color: #9aa1ad;
  --scrollbar-track:   #e9edf0;

  /* ---------------------------------------------------------------
     Typography — families
  --------------------------------------------------------------- */
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Poppins", "Inter", sans-serif;

  /* ---------------------------------------------------------------
     Type scale (font sizes)
  --------------------------------------------------------------- */
  --fs-root:        16px;            /* base for rem math          */
  --fs-body:        1rem;            /* default paragraph ~16px    */
  --fs-small:       0.9rem;
  --fs-caption:     0.8rem;
  --fs-lead:        1.15rem;         /* intro / lead paragraphs    */

  --fs-section-title: 3rem;          /* big gradient section H2    */
  --fs-h2:          2rem;
  --fs-h3:          1.5rem;
  --fs-h4:          1.25rem;
  --fs-h5:          1.1rem;
  --fs-h6:          1rem;
  --fs-eyebrow:     1rem;            /* subtitle under a heading   */
  --fs-stat:        3rem;            /* big counter numbers        */

  /* ---------------------------------------------------------------
     Font weights
  --------------------------------------------------------------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------------
     Misc tokens
  --------------------------------------------------------------- */
  --line-height-body: 1.7;
  --letter-spacing-body: 0;          /* Inter reads best untracked */
  --tracking-heading: -0.01em;       /* subtle tighten for Poppins */
  --section-padding: 7.5rem;
}