/* ==========================================================================
   HYP ERP design tokens. Change a value here and every page follows.
   Palette is taken from the HYP logo and the brand background artwork.
   ========================================================================== */
:root {
  /* Brand */
  --color-brand: #E51E25;          /* HYP red (logo). Accents, never body text */
  --color-brand-text: #C8161D;     /* red for small text on white (AA) */
  --color-glow: #E9512E;           /* the orange-red light in the artwork */

  /* Action: the petrol blue from the approved design */
  --color-action: #0B5A70;
  --color-action-strong: #084658;
  --color-action-tint: #E7F0F3;

  /* Ink and text */
  --color-ink: #13222B;            /* headings */
  --color-text: #33424B;           /* body */
  --color-muted: #5E6C75;          /* secondary text */
  --color-line: #E2E5E7;
  --color-line-strong: #CBD1D5;

  /* Surfaces */
  --color-page: #FFFFFF;
  --color-mist: #F4F5F5;           /* soft grey panels */
  --color-sand: #F2EEE8;           /* warm panels (FAQ) */
  --color-night: #0D1A21;          /* dark panels, matches the artwork */
  --color-night-2: #15262F;
  --color-on-night: #E8EEF0;
  --color-on-night-muted: #B4C4CA;

  /* Type */
  --font-sans: "Figtree", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-h4: 1.125rem;
  --text-h3: 1.25rem;
  --text-h2: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem);
  --text-h1: clamp(2rem, 1.45rem + 2vw, 3.125rem);
  --text-display: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --panel-pad: clamp(1.5rem, 1rem + 3vw, 4rem);

  /* Shape: radius grows with the size of the surface */
  --radius-xs: 6px;    /* tags, inputs */
  --radius-sm: 8px;    /* buttons */
  --radius-md: 14px;   /* cards */
  --radius-lg: 22px;   /* panels */

  --shadow-card: 0 1px 2px rgba(19, 34, 43, 0.05), 0 8px 24px -12px rgba(19, 34, 43, 0.12);
  --shadow-float: 0 2px 4px rgba(19, 34, 43, 0.06), 0 30px 60px -24px rgba(13, 26, 33, 0.35);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--color-action);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 3.5vw, 2.5rem);
  --header-h: 76px;
}