:root {
  /* Brand Colors */
  --theme-navy: #000F47;
  --theme-navy-lite: #333F6C;
  --theme-navy-hover: #1a2854;
  --theme-white: #FFFFFF;
  --theme-pink: #F7F5FF;
  --theme-peach: #FFF6F2;
  --theme-purple: #88449B;
  --theme-light-grey: #F8F8F8;
  --theme-text-dark: #000F47;
  --theme-light-purple: #CEBBF9;
  --theme-border-purple: #E8E0F0;

  /* Site palette (tgc. homepage) */
  --tgc-cream: #FCF9F0;          /* Figma: Off White */
  --tgc-ink: #000000;             /* Figma: Pure Black */
  --tgc-ink-muted: #535554;       /* Figma: TGC Grey */
  --tgc-violet: #8456F0;         /* Figma: TGC Purple */
  --tgc-violet-dark: #7344E1;    /* Figma: UI Purple */
  --tgc-lilac: #CEBBF9;          /* Figma: the motif's pale overlaps */
  --tgc-violet-soft: #EFE7FE;
  --tgc-card: #FFFFFF;
  --tgc-line: #D9D3C7;
  --tgc-line-soft: #E7E1D6;
  --tgc-placeholder: #ADADAD;

  /* Fluid scale
   *
   * Every value in this theme is a pixel off the 1920 Figma artboard, so both
   * units below are "one artboard pixel" and any Figma number N becomes
   * calc(N * var(--tgc-u)).
   *
   * --tgc-u  tracks the viewport exactly, so geometry shrinks with the window
   *          and holds at the 1280 ratio (0.667) below that, where the 968px
   *          breakpoint takes over.
   * --tgc-ut is the same idea for type, but it bottoms out at 0.85 by 1440 so
   *          body copy never falls under 17px on a laptop. This is the floor
   *          the section headings already had via clamp(2rem, 3.13vw, 60px);
   *          it is now the whole type scale rather than two rules.
   */
  --tgc-u: clamp(0.66667px, 100vw / 1920, 1px);
  --tgc-ut: clamp(0.85px, 0.4px + 0.03125vw, 1px);

  /* Typography */
  --tgc-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tgc-font-display: var(--tgc-font-body);

  /* Type scale (Figma) */
  --tgc-text-ui: calc(16 * var(--tgc-ut));         /* nav, pills, labels        16/26  */
  --tgc-text-body: calc(20 * var(--tgc-ut));       /* body copy                 20/30  */
  --tgc-text-lead: calc(26 * var(--tgc-ut));       /* lead paragraph            26/36  */
  --tgc-text-h2: calc(36 * var(--tgc-ut));         /* section heading           36/46  */
  --tgc-text-display: calc(60 * var(--tgc-ut));    /* homepage section heading  60/70  */
  --tgc-text-statement: calc(80 * var(--tgc-ut));  /* service page statement    80/90  */

  /* Section rhythm
   *
   * Figma puts exactly 150 between consecutive content groups on a service
   * page — five gaps on Audits, two on Consulting, and no other value appears
   * — and 60 between a heading and the content under it. The colour bands meet
   * in the middle of that 150, so each carries half of it top and bottom and
   * two adjacent bands add back up to one section gap.
   */
  --tgc-section: calc(150 * var(--tgc-u));
  --tgc-section-half: calc(75 * var(--tgc-u));
  --tgc-heading-gap: calc(60 * var(--tgc-u));

  /* Layout */
  --tgc-container: calc(1700 * var(--tgc-u));
  --tgc-gutter: calc(40 * var(--tgc-u));
  /* Every rounded box in the Figma file is 10 — all 168 of them. */
  --tgc-radius: calc(10 * var(--tgc-u));
  --tgc-radius-lg: calc(48 * var(--tgc-u));

  /* Status */
  --theme-error: #d32f2f;
  --theme-error-bg: #fee2e2;
  --theme-error-border: #ef4444;
  --theme-success-bg: #D4EDDA;
  --theme-success-text: #155724;
  --theme-warning-bg: #FFF3CD;
  --theme-warning-text: #664D03;
}