/* Hendrios design tokens: the single source of colour, type, radius and depth.
   The Django templates read them through hendrios.css; the React pages map the
   same names onto the shadcn variables. Change a value here, not downstream. */
@font-face {
  font-family: "Utendo";
  src: url("../fonts/Utendo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Utendo";
  src: url("../fonts/Utendo-Bold.ttf") format("truetype");
  font-weight: 500 700;
  font-display: swap;
}
/* Display face: Urbanist (SIL OFL, see fonts/Urbanist-OFL.txt) stands in for
   the brand's Nurom until its web licence is confirmed. To switch back, add
   Nurom here and change --h-font-display. */
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-ExtraBold.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

:root {
  --h-font-sans: "Utendo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --h-font-display: "Urbanist", "Utendo", sans-serif;

  /* Surfaces and text */
  --h-color-bg: #FAF8FC;
  --h-color-surface: #FFFFFF;
  --h-color-tint: #F6F4FA;
  --h-color-hover: #F3F0F9;
  --h-color-ink: #1F1D24;
  --h-color-ink-soft: #4A4555;
  --h-color-muted: #5C5868;
  --h-color-line: #ECE8F2;
  --h-color-input: #D9D3E3;

  /* Brand: #7A66A5 is the purple of the logo (4.9:1 against white text). */
  --h-color-primary: #7A66A5;
  --h-color-primary-rgb: 122, 102, 165;
  --h-color-primary-strong: #5E4D87;
  --h-color-primary-ink: #4B3B78;
  --h-color-primary-deep: #2F2550;
  --h-color-primary-soft: #EFEBF6;
  --h-color-primary-line: #D9D0EA;

  /* Status */
  --h-color-danger: #A93226;
  --h-color-danger-rgb: 169, 50, 38;
  --h-color-danger-strong: #831C1E;
  --h-color-danger-soft: #FFEDEA;
  --h-color-success: #247B50;
  --h-color-success-rgb: 36, 123, 80;
  --h-color-success-strong: #04250E;
  --h-color-success-soft: #DCFAE5;
  --h-color-warning: #92400E;
  --h-color-warning-soft: #FFFBEB;
  --h-color-neutral-soft: #EEEDF1;

  /* Shape and depth */
  --h-radius-sm: 6px;
  --h-radius: 8px;
  --h-radius-lg: 12px;
  --h-radius-xl: 16px;
  --h-shadow-card: 0 1px 2px rgba(31, 29, 36, 0.04);
  --h-shadow-overlay: 0 8px 24px rgba(31, 29, 36, 0.12);
  --h-focus-ring: 0 0 0 3px rgba(122, 102, 165, 0.25);
}