/* TLC design tokens. The single source for colour, type, space, shape and motion.
   Values are taken from the approved P3.2 opening. #25d03a and #0d1926 remain
   provisional until checked against the approved brand assets. */
:root {
  /* Colour: brand */
  --tlc-navy: #0d1926;
  --tlc-navy-2: #17364a;
  --tlc-navy-3: #24505f;
  --tlc-green: #25d03a;
  --tlc-green-hover: #64e774;
  --tlc-green-text: #0f7a22;      /* green on white: passes AA for text */
  --tlc-white: #fff;

  /* Colour: neutrals and surfaces */
  --tlc-ink: #142332;
  --tlc-ink-soft: #46596a;
  --tlc-pale: #eef4f0;
  --tlc-pale-2: #dfeee2;
  --tlc-line: #d3dfd7;
  --tlc-line-dark: #3b5564;
  --tlc-on-dark: #dbe6ea;

  /* Type. Arial matches the approved opening. Change this one token to test a typeface. */
  --tlc-font: Arial, Helvetica, sans-serif;
  --tlc-text-xs: .8125rem;
  --tlc-text-sm: .9375rem;
  --tlc-text-md: 1.0625rem;
  --tlc-text-lg: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --tlc-h3: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --tlc-h2: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
  --tlc-display: clamp(2.75rem, 1.9rem + 3.8vw, 5rem);
  --tlc-track-tight: -.03em;

  /* Space (4px base) */
  --tlc-s1: .25rem;
  --tlc-s2: .5rem;
  --tlc-s3: .75rem;
  --tlc-s4: 1rem;
  --tlc-s5: 1.5rem;
  --tlc-s6: 2rem;
  --tlc-s7: 3rem;
  --tlc-s8: 4rem;
  --tlc-section: clamp(3.25rem, 1.75rem + 6.4vw, 8.5rem);
  --tlc-gutter: clamp(1.25rem, .6rem + 3vw, 4.5rem);
  --tlc-max: 1320px;

  /* Shape: the TLC sweep. Three sizes, top-left or bottom-right led. */
  --tlc-sweep-sm: clamp(28px, 4vw, 56px);
  --tlc-sweep-md: clamp(48px, 7vw, 110px);
  --tlc-sweep-lg: clamp(64px, 11vw, 180px);
  --tlc-corner: 8px;
  --tlc-offset: clamp(10px, 1.2vw, 18px);

  /* Elevation */
  --tlc-shadow: 0 18px 44px rgba(13, 25, 38, .16);

  /* Motion */
  --tlc-ease: cubic-bezier(.2, .7, .2, 1);
  --tlc-fast: 160ms;
  --tlc-base: 320ms;
  --tlc-slow: 760ms;

  /* Layering */
  --tlc-z-bar: 50;
}

/* Breakpoints (documented here because CSS custom properties cannot be used in media queries):
   sm 480px · md 760px · lg 1000px · xl 1280px. Design mobile first. */