/*
  TechTrend Design Tokens
  =======================
  Every value here was extracted from the live site's own CSS, not invented:
    - Colors: the tt "Global Kit" custom properties (--e-global-color-*)
      baked into assets/wp-content/uploads/tt/css/post-11.css, cross-checked
      against the highest-frequency hex values across all 48 stylesheets, and the
      hand-authored .bg-purple/.bg-darkpurple/.bg-lightpurple utilities in
      assets/theme/techtrend/style.css.
    - Type: the tt Global Kit typography variables (--e-global-typography-*)
      plus the hand-authored `.content h1..h6` scale in the same theme stylesheet
      (that second one is the closer-to-source-of-truth scale for hand-built pages;
      individual tt widgets sometimes use slightly different one-off sizes
      for a specific hero/section — those stay as local overrides in components.css
      rather than being forced into this shared scale, to preserve pixel fidelity).
    - Spacing/breakpoints/radius/shadow: theme style.css's gap/padding-top/padding-bottom
      utility classes and the recurring border-radius/box-shadow values found via
      frequency analysis across all CSS.
*/

:root {
  /* ---- Color: brand (from tt Global Kit) ---- */
  --color-primary: #2a276f;        /* dark navy/indigo - headings, dark bg, primary text-on-light */
  --color-primary-hover: #1c1a49;  /* .btn:hover darken */
  --color-secondary: #6b4ee6;      /* bright purple - secondary bg/buttons */
  --color-secondary-mid: #4a3aa9;  /* mobile nav section bg (one step darker than secondary) */
  --color-secondary-dark: #3a2f8c; /* mobile nav sub-section bg (two steps darker) */
  --color-accent: #2bbef2;         /* cyan - eyebrow labels, icon accents, category tags */
  --color-warm: #f89f5b;           /* orange - tertiary highlight */
  --color-violet: #5237c3;         /* violet - tertiary highlight */

  /* ---- Color: neutrals ---- */
  --color-text: #505050;           /* body copy on light backgrounds */
  --color-text-muted: #69727d;
  --color-white: #ffffff;
  --color-lightpurple: #e3ddfa;    /* light tint - link hover on dark bg, soft section bg */
  --color-lightpurple-soft: #cfc6f7;
  --color-lightpurple-softer: #beb2f4;

  /* ---- Color: semantic/status (seen across form + notice styles) ---- */
  --color-success: #39b54a;
  --color-error: #c0392b;
  --color-danger: #d9534f;
  --color-warning: #f0ad4e;
  --color-info: #5bc0de;

  /* ---- Typography: families ---- */
  --font-display: "Teko", sans-serif;              /* huge hero/display numerals & headlines only */
  --font-heading: "adelle-condensed", sans-serif;   /* h1/h2/h4 across the site */
  --font-body: "Open Sans", sans-serif;             /* body copy, nav, eyebrow labels, buttons */

  /* ---- Typography: the hand-authored `.content` scale (source of truth for new/rebuilt markup) ---- */
  --text-h1-size: 54px;   --text-h1-line: 62px;  --text-h1-weight: 400;  /* adelle-condensed */
  --text-h2-size: 24px;   --text-h2-line: 34px;  --text-h2-weight: 400;  /* adelle-condensed */
  --text-h3-size: 14px;   --text-h3-line: 19px;  --text-h3-weight: 700;  /* Open Sans, uppercase - eyebrow/label */
  --text-h4-size: 28px;   --text-h4-line: 36px;  --text-h4-weight: 300;  /* adelle-condensed */
  --text-h6-size: 18px;   --text-h6-line: 24px;  --text-h6-weight: 600;  /* Open Sans */
  --text-body-size: 18px; --text-body-line: 28px; --text-body-weight: 400; /* Open Sans */
  --text-small-size: 16px;
  --text-caption-size: 12px;

  /* ---- Typography: the site-wide "Global Kit" default h1/h2 cascade (tt-kit.css) -
         a DIFFERENT scale than --text-h1/h2 above, which is the hand-authored `.content`
         scale. Both are real, distinct scales the source site uses in different places;
         this one is what bare <h1>/<h2> tags get by default outside `.content`. ---- */
  --text-kit-h1-size: 36px;  --text-kit-h1-line: 52px;  --text-kit-h1-weight: 200;  /* adelle-condensed */
  --text-kit-h2-size: 28px;  --text-kit-h2-line: 63px;  --text-kit-h2-weight: 400;  /* adelle-condensed */

  /* ---- Typography: display/hero one-offs (tt Global Kit + observed hero sizes) ---- */
  --text-display-xl-size: 138px; --text-display-xl-line: 116px; --text-display-xl-tracking: -2px; /* Teko */
  --text-display-lg-size: 73px;                                                                    /* Teko */
  --text-display-md-size: 49px;  --text-display-md-line: 55px;                                     /* Teko */

  /* ---- Spacing scale (px) - matches the site's .gap-N / .pad-t-N / .pad-b-N utilities exactly ---- */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ---- Breakpoints (documented as custom properties for reference - media queries can't consume
         var() in the query itself, so components.css repeats these as literal px) ---- */
  --bp-sm: 640px;   /* mobile stack point */
  --bp-md: 1240px;  /* tablet/desktop split */
  --bp-lg: 1690px;  /* desktop/wide split */

  /* ---- Radius ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-xl: 36px;
  --radius-2xl: 40px;
  --radius-pill: 50%;
  --radius-btn: 100px; /* real .tt-button radius (custom-frontend.min.css) - visually a full pill at button height */
  /* signature asymmetric "cut corner" shapes used on imagery/cards across the site */
  --radius-cut-tl-br: 140px 0px 140px 0px;
  --radius-cut-br: 0px 0px 140px 0px;
  --radius-cut-bl: 0px 0px 0px 140px;
  --radius-cut-circle: 100px 100px 100px 100px;

  /* ---- Shadow ---- */
  --shadow-sm: 3px 3px 4px 1px rgba(0, 0, 0, 0.3);   /* .btn */
  --shadow-md: 8px 8px 14px 0px rgba(0, 0, 0, 0.15); /* .shadow utility */
  --shadow-lg: 10px 11px 30px 0px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --transition-fast: 0.25s;
}