/* DocHaqq website tokens — source: DESIGN.md (website). Product-only tokens are marked. */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Geist + Geist Mono: used ONLY inside product mockups, so they match the product's own type */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --primary: #4338CA;
  --primary-deep: #3730A3;
  --primary-press: #2E2B8C;
  --primary-soft: #6D28D9;
  --primary-tint: #E5E2FB;
  --ink: #18171F;
  --ink-secondary: #2A2933;
  --ink-inverse: #F5F3EE;
  --muted: #6F6E79;
  --on-primary: #FFFFFF;
  --canvas: #FFFFFF;
  --canvas-soft: #F5F5F8;
  --night: #17161C;
  --hairline: #E4E3EA;
  --control-border: #7D7C88;       /* from product DESIGN.md: ≥3:1 for form controls */
  --muted-on-night: #908F98;
  --gradient: linear-gradient(135deg, #4338CA 0%, #6D28D9 50%, #9333EA 100%);

  /* Product-only: risk verdicts. Used only inside product mockups. */
  --risk-high: #C23B3B;
  --risk-review: #C77F1A;
  --risk-low: #2D8A56;

  /* Spacing (8px base) */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-xxl: 64px;
  --sp-huge: 96px;

  /* Shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 9999px;

  /* Motion (from product tokens) */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Elevation */
  --shadow-card-hover: 0 8px 24px rgba(24, 23, 31, 0.10), 0 1px 2px rgba(24, 23, 31, 0.06);

  /* Responsive type: display steps down 48 → 36 → 28 (not proportional shrink) */
  --fs-display-xl: 28px;
  --fs-display-lg: 26px;
  --section-pad: 48px;
  --gutter: 16px;
  --header-h: 64px;
}
@media (min-width: 640px) {
  :root { --fs-display-xl: 36px; --fs-display-lg: 30px; --section-pad: 64px; --gutter: 24px; --header-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --fs-display-xl: 48px; --fs-display-lg: 34px; --section-pad: 96px; }
}