/* Third Practice Consulting design tokens, v1.1
   FONT RULE: this file is for the website. Hanken Grotesk is used ONLY on the website and inside the logo files.
   Every other context (documents, email, slides, invoices, third-party platforms) uses Arial and nothing else.
   Source of truth: STYLE-GUIDE.md. Do not add colours or sizes that are not listed here. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk[wght].ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core brand colours */
  --tp-navy: #0A0F1A;          /* Ink. Primary text, dark surfaces, the T */
  --tp-blue: #316B96;          /* Practice blue. Third stroke on light, links, primary accent */
  --tp-blue-strong: #255475;   /* Hover/pressed state for practice blue on light */
  --tp-blue-light: #6DB3F2;    /* Signal blue. Third stroke on dark, links on dark */
  --tp-blue-light-strong: #9DCBF7; /* Hover state for signal blue on dark */
  --tp-brass: #DDA469;         /* Optional accent. Sparing. Text use on dark only */
  --tp-brass-deep: #8A6136;    /* Brass for text on light backgrounds */

  /* Neutrals */
  --tp-white: #FFFFFF;
  --tp-mist: #F3F6FA;          /* Off-white surface, reversed type */
  --tp-slate-700: #3A4556;     /* Secondary text on light */
  --tp-slate-500: #5F6B7A;     /* Muted text on light (minimum for body-size text) */
  --tp-slate-300: #A9B4C2;     /* Muted text on dark */
  --tp-line: #DDE2E8;          /* Borders and dividers on light */
  --tp-navy-raised: #141C2B;   /* Raised surface on dark */
  --tp-navy-line: #2A3446;     /* Borders and dividers on dark */

  /* Status and risk (always paired with a text label) */
  --tp-risk-critical: #7A1A12;
  --tp-risk-high: #B42318;
  --tp-risk-medium: #8A6136;
  --tp-risk-low: #316B96;
  --tp-risk-info: #5F6B7A;
  --tp-success: #2E7D4F;

  /* Semantic roles: light theme (default) */
  --tp-bg: var(--tp-white);
  --tp-bg-subtle: var(--tp-mist);
  --tp-text: var(--tp-navy);
  --tp-text-secondary: var(--tp-slate-700);
  --tp-text-muted: var(--tp-slate-500);
  --tp-link: var(--tp-blue);
  --tp-link-hover: var(--tp-blue-strong);
  --tp-border: var(--tp-line);
  --tp-focus: var(--tp-blue);

  /* Typography */
  --tp-font: "Hanken Grotesk", Arial, sans-serif;          /* WEBSITE ONLY. See STYLE-GUIDE 5.1 */
  --tp-font-mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
  --tp-font-email: Arial, Helvetica, sans-serif;            /* email HTML: never use --tp-font */
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;

  --tp-text-display: 3rem;      /* 48px / 56px */
  --tp-text-h1: 2.375rem;       /* 38px / 46px */
  --tp-text-h2: 1.875rem;       /* 30px / 38px */
  --tp-text-h3: 1.5rem;         /* 24px / 32px */
  --tp-text-h4: 1.1875rem;      /* 19px / 28px */
  --tp-text-body-lg: 1.1875rem; /* 19px / 30px */
  --tp-text-body: 1.0625rem;    /* 17px / 28px */
  --tp-text-small: 0.875rem;    /* 14px / 22px */
  --tp-text-caption: 0.8125rem; /* 13px / 20px */

  /* Spacing: 8px base */
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 16px;
  --tp-space-4: 24px;
  --tp-space-5: 32px;
  --tp-space-6: 48px;
  --tp-space-7: 64px;
  --tp-space-8: 96px;
  --tp-space-9: 128px;

  /* Shape */
  --tp-radius-sm: 4px;   /* inputs, buttons, tags */
  --tp-radius-md: 8px;   /* cards, panels */
  --tp-border-width: 1px;
  --tp-rule-strong: 3px; /* the one heavier rule: section markers, active nav */

  /* Layout */
  --tp-content-max: 1200px;
  --tp-text-max: 68ch;
}

/* Dark surfaces: apply .tp-dark to any section, or use prefers-color-scheme if the site offers a dark theme */
.tp-dark {
  --tp-bg: var(--tp-navy);
  --tp-bg-subtle: var(--tp-navy-raised);
  --tp-text: var(--tp-mist);
  --tp-text-secondary: #C9D2DD;
  --tp-text-muted: var(--tp-slate-300);
  --tp-link: var(--tp-blue-light);
  --tp-link-hover: var(--tp-blue-light-strong);
  --tp-border: var(--tp-navy-line);
  --tp-focus: var(--tp-blue-light);
}