/* TouchSuite design tokens.
   Every color below already exists in the site's code (see the redesign's
   brand notes); pages reference these variables instead of hex values. */
:root {
  /* Brand blues */
  --ts-blue-500: #00a7ef;   /* logo + primary button fill */
  --ts-blue-600: #0090d4;   /* hover fill */
  --ts-blue-700: #007ab8;   /* text-safe blue on white (4.7:1) */
  --ts-blue-900: #003a6e;
  --ts-blue-tint: rgba(0, 167, 239, 0.08);
  --ts-blue-tint-strong: rgba(0, 167, 239, 0.16);
  --ts-blue-line: rgba(0, 167, 239, 0.28);

  /* Navy and neutrals */
  --ts-navy-800: #17324d;
  --ts-navy-900: #0f1b2d;
  --ts-ink: #111111;
  --ts-muted: #4e6279;
  --ts-dim: #94a8bc;        /* decorative only, never body text on white */
  --ts-line: #c8d8e4;
  --ts-line-soft: rgba(15, 27, 45, 0.09);
  --ts-white: #ffffff;
  --ts-sky-25: #f8fbfd;
  --ts-sky-50: #f2f8fd;
  --ts-sky-100: #eaf4fb;
  --ts-sky-150: #e4f3fd;
  --ts-sky-200: #ddeefa;
  --ts-sky-300: #8ecfee;

  /* Further shades that already appear in page styles */
  --ts-blue-400: #00c0ff;
  --ts-blue-650: #0080c8;
  --ts-blue-800: #0057a0;
  --ts-blue-950: #003566;
  --ts-slate-25: #f8fafc;
  --ts-sky-30: #f5fbff;
  --ts-sky-40: #f0f8ff;
  --ts-sky-45: #f0f7ff;
  --ts-sky-110: #e8f5fd;
  --ts-sky-120: #e6f2fb;
  --ts-sky-130: #e6f4fb;
  --ts-amber: #f5a623;
  --ts-gold-light: #f0d060;
  --ts-gold-deep: #5c4300;
  --ts-blue-720: #0077bb;
  --ts-blue-750: #006fa3;   /* text-safe blue on white and on every tint (>= 4.8:1); used for links, eyebrows, breadcrumbs */
  --ts-blue-850: #00527a;
  --ts-blue-975: #00305a;
  --ts-sky-60: #eef6fb;
  --ts-sky-140: #e0f0ff;
  --ts-navy-850: #1a2a3a;
  --ts-slate-150: #e8edf3;
  --ts-slate-200: #e2e8f0;
  --ts-slate-300: #cbd5e1;
  --ts-slate-350: #b7c3cf;
  --ts-slate-500: #64748b;
  --ts-slate-700: #334155;
  --ts-slate-900: #0f172a;
  --ts-red-50: #fef0f0;
  --ts-red-200: #f5b7b1;
  --ts-red-450: #e0455a;
  --ts-red-500: #e53e3e;
  --ts-red-700: #c0392b;
  --ts-green-50: #e6f9ee;
  --ts-green-200: #a8ddb9;
  --ts-green-700: #1a7d3b;
  --ts-green-400: #66c982;
  --ts-green-800: #137150;
  --ts-mint-300: #8ad8c1;
  --ts-teal-700: #227d8f;
  --ts-slate-50: #f2f4f6;

  /* Status and accents already used on the site */
  --ts-success: #22c55e;
  --ts-success-ink: #15803d;
  --ts-danger: #ef4444;
  --ts-danger-ink: #b91c1c;
  --ts-danger-tint: #fef2f2;
  --ts-warning: #f59e0b;
  --ts-gold: #c8a84b;
  --ts-gold-ink: #7a5c00;
  --ts-gold-tint: #fffdf0;

  /* On-dark text */
  --ts-on-dark: #ffffff;
  --ts-on-dark-muted: rgba(255, 255, 255, 0.78);
  --ts-on-dark-blue: #8ecfee;

  /* Semantic aliases */
  --color-bg: var(--ts-white);
  --color-bg-alt: var(--ts-sky-50);
  --color-surface: var(--ts-white);
  --color-text: var(--ts-ink);
  --color-heading: var(--ts-navy-900);
  --color-text-muted: var(--ts-muted);
  --color-link: var(--ts-blue-750);
  --color-primary: var(--ts-blue-500);
  --color-primary-hover: var(--ts-blue-600);
  --color-on-primary: var(--ts-navy-900);
  --color-border: var(--ts-line-soft);
  --color-focus: var(--ts-blue-750);

  /* Type */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* Space (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(56px, 7vw, 96px);
  --container: 1200px;
  --gutter: 24px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.06);
  --shadow-2: 0 4px 16px rgba(15, 27, 45, 0.08);
  --shadow-3: 0 16px 40px rgba(15, 27, 45, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* Legacy page variables, re-pointed at the tokens so old inline styles
     follow the design system. */
  --bg-deep: var(--ts-white);
  --bg-mid: var(--ts-sky-50);
  --bg-card: var(--ts-white);
  --bg-card2: var(--ts-sky-100);
  --blue: var(--ts-blue-500);
  --blue-light: var(--ts-blue-750);
  --blue-dark: var(--ts-blue-750);
  --blue-deep: var(--ts-navy-800);
  --blue-glow: var(--ts-blue-tint);
  --text: var(--ts-ink);
  --text-muted: var(--ts-muted);
  --text-dim: var(--ts-muted);
  --border: var(--ts-blue-line);
  --border-soft: var(--ts-line-soft);
}