/* GENERATED by scripts/sync-from-marketing.sh. Do not edit by hand.
   Source: intranet.zenpo.com/app/globals.css (:root block, verbatim)
           intranet.zenpo.com/components/SiteFooter.tsx (footer colors)
           intranet.zenpo.com/app/layout.tsx (font families) */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #1a63be;
  --color-accent-2: #4a7fc4;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #eff5fe;
  --color-accent-200: #dcebfd;
  --color-accent-300: #bed7fb;
  --color-accent-400: #8db8f2;
  --color-accent-500: #4a8ae0;
  --color-accent-600: #1c5cad;
  --color-accent-700: #124a90;
  --color-accent-800: #123a6d;
  --color-accent-900: #152944;

  --color-accent-2-100: #eff5fe;
  --color-accent-2-200: #dcebfd;
  --color-accent-2-300: #bed7fb;
  --color-accent-2-400: #8db8f2;
  --color-accent-2-500: #6b95d4;
  --color-accent-2-600: #3d6fb5;
  --color-accent-2-700: #2a568f;
  --color-accent-2-800: #1d3f66;
  --color-accent-2-900: #182b42;

  --font-heading: var(--font-archivo), system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: var(--font-archivo), system-ui, sans-serif;
  --font-brand: var(--font-sakkal), Georgia, serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* Fonts. On the marketing site next/font defines --font-archivo and
   --font-sakkal (app/layout.tsx: Archivo 400/600/800 from Google, Sakkal
   Majalla from a local file). Here Archivo comes from a Google Fonts <link>
   and Sakkal Majalla from wwwroot/fonts. */
:root {
  --font-archivo: "Archivo";
  --font-sakkal: "Sakkal Majalla";
}

@font-face {
  font-family: "Sakkal Majalla";
  src: url("../fonts/SakkalMajalla.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* Footer colors, hard-coded inline in components/SiteFooter.tsx. */
:root {
  --footer-bg: #0d1033;
  --footer-text: #d7dae9;
  --footer-muted: #9aa0bf;
  --footer-heading: #8b90b0;
  --footer-icon: #c3c7dc;
  --footer-brand: #f0921f;
  --footer-divider: rgba(255, 255, 255, 0.12);
}