/* tokens.css — design tokens (colors, spacing, typography, etc.) */

:root {
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;

  /* Motion — Figma's hover variants define no transition, so this timing is
     a site choice, shared by every component hover state. */
  --transition-hover: 0.2s ease;
}

/* ==========================================================================
   COLORS — Figma design system ("Website" variable collection)
   Ramps mirror the Figma variable names exactly (Primary/Secondary/Tertiary/
   Neutral/Accent1/Accent2, each 25–900 or 25–950).
   ========================================================================== */
:root {
  /* Primary — magenta/brand (Figma: Primary/*) */
  --color-primary-25: #fefaff;
  --color-primary-50: #fef7ff;
  --color-primary-100: #f8d2fb;
  --color-primary-200: #f3aef5;
  --color-primary-300: #e87dee;
  --color-primary-400: #da3fe0;
  --color-primary-500: #cd08d1;
  --color-primary-600: #a00da3;
  --color-primary-700: #810a85;
  --color-primary-800: #620475;
  --color-primary-900: #4c0445;
  --color-primary-950: #34032c;

  /* Secondary — blue (Figma: Secondary/*) */
  --color-secondary-25: #f5f6fa;
  --color-secondary-50: #e4e9f6;
  --color-secondary-100: #c5d0f1;
  --color-secondary-200: #a0b3ee;
  --color-secondary-300: #708feb;
  --color-secondary-400: #3b66e8;
  --color-secondary-500: #1545d5;
  --color-secondary-600: #1138ac;
  --color-secondary-700: #0e2b81;
  --color-secondary-800: #0c205a;
  --color-secondary-900: #0b1638;

  /* Tertiary — violet (Figma: Tertiary/*) */
  --color-tertiary-25: #f9f6fb;
  --color-tertiary-50: #f5effa;
  --color-tertiary-100: #ede3fb;
  --color-tertiary-200: #e4d0f9;
  --color-tertiary-300: #d9bdf7;
  --color-tertiary-400: #c9a8f5;
  --color-tertiary-500: #ae6cf4;
  --color-tertiary-600: #9730f7;
  --color-tertiary-700: #7530b6;
  --color-tertiary-800: #5a298e;
  --color-tertiary-900: #442267;

  /* White — literal #ffffff used as page/card background throughout the
     Figma file; not part of the Neutral ramp itself (Neutral/25 is the
     nearest ramp step, #fbfbfc, but the design uses true white directly). */
  --color-white: #ffffff;

  /* Neutral — grayscale (Figma: Neutral/*) */
  --color-neutral-25: #fbfbfc;
  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #f1f2f4;
  --color-neutral-200: #e3daeb;
  --color-neutral-250: #cac4d0;
  --color-neutral-300: #b1a7be;
  --color-neutral-350: #8a8594;
  --color-neutral-400: #6d758f;
  --color-neutral-500: #5a5a64;
  --color-neutral-600: #464a59;
  --color-neutral-700: #353843;
  --color-neutral-800: #27292f;
  --color-neutral-900: #18191b;
  --color-neutral-950: #0c0c0d;

  /* Accent 1 — teal (Figma: Accent1/*) */
  --color-accent1-25: #fafdfc;
  --color-accent1-50: #e8f8f5;
  --color-accent1-100: #e8f4f3;
  --color-accent1-200: #bce6e1;
  --color-accent1-300: #83d8ce;
  --color-accent1-400: #47cdbd;
  --color-accent1-500: #0ea5a0;
  --color-accent1-600: #0e817d;
  --color-accent1-700: #0d5e5b;
  --color-accent1-800: #0c403f;
  --color-accent1-900: #0a2423;

  /* Accent 2 — terracotta/brown (Figma: Accent2/*) */
  --color-accent2-25: #fbf6f4;
  --color-accent2-50: #f7eee8;
  --color-accent2-100: #f1dcd0;
  --color-accent2-200: #eac4ae;
  --color-accent2-300: #e1a989;
  --color-accent2-400: #d78c60;
  --color-accent2-500: #cc723e;
  --color-accent2-600: #ab5d30;
  --color-accent2-700: #894c29;
  --color-accent2-800: #673c22;
  --color-accent2-900: #472b1a;

  /* Status colors — used on the Governance & Security severity legend.
     No named Figma variable exists for these; named by usage. */
  --color-status-success: #15803d;
  --color-status-warning: #a16207;
  --color-status-alert: #c2410c;
  --color-status-critical: #b91c1c;
}

/* ==========================================================================
   WEB FONTS — self-hosted from assets/fonts/ (SIL OFL 1.1; licenses alongside)
   Only the weights/styles the site uses: Inter 400/500/600/700/800 + 700
   italic (testimonial quotes), Source Sans 3 400/500/600/700. No local()
   source, so every visitor gets these exact files rather than whatever
   version happens to be installed. font-display: swap shows fallback text
   immediately and swaps in the web font once it loads.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/SourceSans3-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TYPOGRAPHY PRIMITIVES — Figma "Typography primatives" variable collection
   One custom property per Figma variable; names follow the Figma variable
   path (e.g. "font size/6 (36)" -> --font-size-6).
   Figma's "line height/*" primitives are absolute px values tied to one font
   size each (Figma variables can't hold percentages); they're expressed
   below as unitless ratios on the semantic
   tokens instead (px / size), so line-height still tracks the responsive
   font sizes. No letter-spacing variables exist in Figma.
   ========================================================================== */
:root {
  /* family/* */
  --font-family-title-and-body: "Inter", sans-serif;     /* family/family title and body */
  --font-family-caption: "Source Sans 3", sans-serif;    /* family/family caption */

  /* font size/* */
  --font-size-1: 14px;  /* font size/1 (14) */
  --font-size-2: 16px;  /* font size/2 (16) */
  --font-size-3: 18px;  /* font size/3 (18) */
  --font-size-4: 22px;  /* font size/4 (22) */
  --font-size-5: 28px;  /* font size/5 (28) */
  --font-size-6: 36px;  /* font size/6 (36) */
  --font-size-7: 48px;  /* font size/7 (48) */

  /* font weight/* */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
}

/* ==========================================================================
   SITE-ONLY TYPOGRAPHY — values used by Figma components (Navbar, Footer,
   nav link variants) that are NOT backed by a Figma variable. If these get
   added to Figma's "Typography primatives", rename to match.
   ========================================================================== */
:root {
  --font-size-0: 12px;                    /* footer nav links (nav link variant 2), logo ® + slogan */
  --font-nav-letter-spacing: 0.02em;      /* nav links, header + footer (2%) */
  --font-slogan-letter-spacing: -0.5px;   /* "by DTxPlus" logo slogan */
}

/* ==========================================================================
   TYPOGRAPHY — Figma "Typography tokens" variable collection / text styles
   Each style exposes -family/-size/-weight/-line-height/-letter-spacing and
   aliases the primitives above exactly as the Figma tokens do
   (e.g. heading/H1/size -> font size/6 (36)).
   -letter-spacing values come from the Figma text styles; they are not
   backed by a Figma variable.
   ========================================================================== */
:root {
  /* Title (Inter Extra Bold 48/120%) */
  --font-title-family: var(--font-family-title-and-body);
  --font-title-size: var(--font-size-7);
  --font-title-weight: var(--font-weight-extra-bold);
  --font-title-line-height: 1.2;   /* line height (title) = 57.6px */
  --font-title-letter-spacing: 0em;

  /* H1 (Inter Extra Bold 36/120%) */
  --font-h1-family: var(--font-family-title-and-body);
  --font-h1-size: var(--font-size-6);
  --font-h1-weight: var(--font-weight-extra-bold);
  --font-h1-line-height: 1.2;      /* line height (H1) = 43.2px */
  --font-h1-letter-spacing: 0em;

  /* H2 (Inter Extra Bold 28/120%) */
  --font-h2-family: var(--font-family-title-and-body);
  --font-h2-size: var(--font-size-5);
  --font-h2-weight: var(--font-weight-extra-bold);
  --font-h2-line-height: 1.2;      /* line height (H2) = 33.6px */
  --font-h2-letter-spacing: 0em;

  /* H3 (Inter Bold 22/150%) */
  --font-h3-family: var(--font-family-title-and-body);
  --font-h3-size: var(--font-size-4);
  --font-h3-weight: var(--font-weight-bold);
  --font-h3-line-height: 1.5;      /* line height (H3) = 33px */
  --font-h3-letter-spacing: 0em;

  /* H4 (Inter Semi Bold 18/150%) */
  --font-h4-family: var(--font-family-title-and-body);
  --font-h4-size: var(--font-size-3);
  --font-h4-weight: var(--font-weight-semibold);
  --font-h4-line-height: 1.5;      /* line height (H4) = 27px */
  --font-h4-letter-spacing: 0em;

  /* Body Bold (Inter Bold 16/150%, +2% tracking) */
  --font-body-bold-family: var(--font-family-title-and-body);
  --font-body-bold-size: var(--font-size-2);
  --font-body-bold-weight: var(--font-weight-bold);
  --font-body-bold-line-height: 1.5;   /* line height (body) = 24px */
  --font-body-bold-letter-spacing: 0.02em;

  /* Body Regular (Inter Medium 16/150%) */
  --font-body-regular-family: var(--font-family-title-and-body);
  --font-body-regular-size: var(--font-size-2);
  --font-body-regular-weight: var(--font-weight-medium);
  --font-body-regular-line-height: 1.5; /* line height (body) = 24px */
  --font-body-regular-letter-spacing: 0em;

  /* Body Small (Inter Medium 14/150%) */
  --font-body-small-family: var(--font-family-title-and-body);
  --font-body-small-size: var(--font-size-1);
  --font-body-small-weight: var(--font-weight-medium);
  --font-body-small-line-height: 1.5;  /* line height (body small) = 21px */
  --font-body-small-letter-spacing: 0em;

  /* Caption (Source Sans 3 Regular 14/120%) */
  --font-caption-family: var(--font-family-caption);
  --font-caption-size: var(--font-size-1);
  --font-caption-weight: var(--font-weight-regular);
  --font-caption-line-height: 1.2;     /* line height caption = 16.8px */
  --font-caption-letter-spacing: 0em;

  /* Stat — large display numbers (e.g. "3 in 4", "40%+"). Not a named Figma
     text style; introduced so big stat numbers can scale responsively like
     the heading tokens do, instead of a page hardcoding a literal size. */
  --font-stat-size: 40px;
}

/* ==========================================================================
   RESPONSIVE TYPE SCALE
   Headings and display numbers scale down at narrower widths so they don't
   dominate or wrap awkwardly on small screens. Body/caption sizes are left
   unchanged at every breakpoint — 14–16px is already close to the practical
   minimum for comfortable reading, so shrinking them further would hurt
   readability without meaningfully helping layout.
   Breakpoints: desktop 769px+ (defaults above), tablet 481–768px, mobile
   up to 480px. Written desktop-first (cascading max-width) so the tablet
   block also applies at mobile widths unless the mobile block overrides it.
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --font-title-size: 36px;
    --font-h1-size: 28px;
    --font-h2-size: 24px;
    --font-h3-size: 20px;
    --font-h4-size: 17px;
    --font-stat-size: 32px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-title-size: 28px;
    --font-h1-size: 24px;
    --font-h2-size: 20px;
    --font-h3-size: 18px;
    --font-h4-size: 16px;
    --font-stat-size: 26px;
  }
}