/* ==========================================================================
   Sarrai Design System — colors & type foundations
   Palette anchored on the logo: #3F497F navy + #EB780E orange.
   Vibe: warm & human, Intercom / Front adjacent. Professional but not sterile.
   ========================================================================== */

/* ---- Fonts (self-hosted, GDPR-vriendelijk) ----
   Poppins (body/UI), Bricolage Grotesque (display headings), JetBrains Mono (code).
   Self-gehost vanuit /wwwroot/fonts om Google Fonts van het kritieke pad te halen
   (render-blocking + bezoeker-IP dat naar Google lekt). De woff2's komen 1-op-1 uit de
   Google Fonts CSS2 API (latin + latin-ext). Latin-ext laadt enkel als zo'n teken op de
   pagina staat. Bijwerken/opnieuw ophalen: python tools/regenerate-fonts.py.
*/
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-500-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-500-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* =========================================================================
     BRAND — primary/accent
     ========================================================================= */
  --brand-navy:         #3F497F;   /* Sarrai wordmark — primary brand */
  --brand-navy-600:     #384171;   /* hover on navy surfaces */
  --brand-navy-700:     #2F375E;   /* press / deeper */
  --brand-navy-800:     #252B48;   /* text on light / deepest */
  --brand-navy-300:     #8A93BA;   /* disabled / tertiary */
  --brand-navy-200:     #C7CBDD;   /* soft outlines / rails */
  --brand-navy-100:     #E7E9F1;   /* soft tinted surfaces */
  --brand-navy-50:      #F3F4F9;   /* lightest tint */

  --brand-orange:       #EB780E;   /* Sarrai accent — CTAs, Lira highlights */
  --brand-orange-600:   #D26A07;   /* hover */
  --brand-orange-700:   #B25904;   /* press */
  --brand-orange-300:   #F5B06B;   /* soft accent */
  --brand-orange-200:   #FBDDBD;   /* badge bg */
  --brand-orange-100:   #FDEEDB;   /* subtle highlight */
  --brand-orange-50:    #FFF7EF;   /* warmest neutral tint */

  /* =========================================================================
     NEUTRALS — warm gray, slightly tinted toward the navy for coherence
     ========================================================================= */
  --neutral-0:          #FFFFFF;
  --neutral-25:         #FBFBFD;   /* app bg */
  --neutral-50:         #F6F7FA;   /* subtle fill */
  --neutral-100:        #EEEFF4;   /* dividers-ish fill */
  --neutral-200:        #E2E4EC;   /* borders */
  --neutral-300:        #CBCED9;   /* strong borders */
  --neutral-400:        #9A9FB0;   /* placeholder text */
  --neutral-500:        #6B7088;   /* secondary text */
  --neutral-600:        #4B5068;   /* body text on light */
  --neutral-700:        #343852;   /* strong text */
  --neutral-800:        #22263C;   /* headings */
  --neutral-900:        #141727;   /* maximum contrast */

  /* =========================================================================
     SEMANTIC — status
     ========================================================================= */
  --success:            #1F9D6A;
  --success-bg:         #E4F5ED;
  --success-fg:         #0F6B47;

  --warning:            #D98A0A;
  --warning-bg:         #FDF1DA;
  --warning-fg:         #8A5400;

  --danger:             #D64545;
  --danger-bg:          #FBE5E5;
  --danger-fg:          #902626;

  --info:               #3F72B8;    /* tempered navy-adjacent info */
  --info-bg:            #E4EDF8;
  --info-fg:            #1F4578;

  /* =========================================================================
     SEMANTIC — foreground / background aliases
     ========================================================================= */
  --fg-1:               var(--neutral-800);   /* primary heading text */
  --fg-2:               var(--neutral-700);   /* body */
  --fg-3:               var(--neutral-500);   /* secondary */
  --fg-4:               var(--neutral-400);   /* tertiary / placeholder */
  --fg-on-brand:        var(--neutral-0);     /* text on navy / orange fills */
  --fg-link:            var(--brand-navy);
  --fg-link-hover:      var(--brand-navy-700);

  --bg-app:             var(--neutral-25);
  --bg-surface:         var(--neutral-0);
  --bg-surface-2:       var(--neutral-50);    /* raised card on app bg */
  --bg-sunken:          var(--neutral-100);   /* inputs / chips */
  --bg-brand:           var(--brand-navy);
  --bg-brand-soft:      var(--brand-navy-50);
  --bg-accent-soft:     var(--brand-orange-50);

  --border-subtle:      var(--neutral-200);
  --border-default:     var(--neutral-300);
  --border-strong:      var(--neutral-500);
  --border-brand:       var(--brand-navy);
  --ring-focus:         color-mix(in oklch, var(--brand-navy) 40%, transparent);

  /* =========================================================================
     TYPOGRAPHY — Poppins for body/UI, Bricolage Grotesque for display headings, JetBrains Mono for code
     ========================================================================= */
  --font-sans:          "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:       "Bricolage Grotesque", system-ui, sans-serif; /* characterful display grotesque, contrast against round Poppins */
  --font-mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* type scale — modest 1.18 ratio, warm not dramatic */
  --fs-12: 0.75rem;   /* 12 — micro labels / meta */
  --fs-13: 0.8125rem; /* 13 — caption */
  --fs-14: 0.875rem;  /* 14 — body small / dense UI */
  --fs-15: 0.9375rem; /* 15 — default UI body */
  --fs-16: 1rem;      /* 16 — marketing body */
  --fs-18: 1.125rem;  /* 18 — lead / large body */
  --fs-20: 1.25rem;   /* 20 — h4 */
  --fs-24: 1.5rem;    /* 24 — h3 */
  --fs-30: 1.875rem;  /* 30 — h2 */
  --fs-36: 2.25rem;   /* 36 — h1 / page title */
  --fs-48: 3rem;      /* 48 — hero */
  --fs-60: 3.75rem;   /* 60 — marketing display */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.06em;   /* for all-caps eyebrow labels */

  /* =========================================================================
     SPACING — 4px base
     ========================================================================= */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* =========================================================================
     RADII — medium-soft; not pill-heavy. Intercom-style cards with 12-16px radius.
     ========================================================================= */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;    /* inputs, small buttons */
  --r-lg:  12px;   /* buttons, chips */
  --r-xl:  16px;   /* cards */
  --r-2xl: 24px;   /* hero cards / large surfaces */
  --r-full: 999px; /* avatars, pills */

  /* =========================================================================
     SHADOWS — soft, warm, low-spread. Navy-tinted rather than pure black.
     ========================================================================= */
  --shadow-xs:  0 1px 2px rgba(37, 43, 72, 0.06);
  --shadow-sm:  0 1px 2px rgba(37, 43, 72, 0.06),
                0 1px 3px rgba(37, 43, 72, 0.08);
  --shadow-md:  0 4px 10px -2px rgba(37, 43, 72, 0.08),
                0 2px 4px -2px rgba(37, 43, 72, 0.06);
  --shadow-lg:  0 12px 24px -8px rgba(37, 43, 72, 0.14),
                0 4px 8px -2px rgba(37, 43, 72, 0.06);
  --shadow-xl:  0 24px 48px -12px rgba(37, 43, 72, 0.18);
  --shadow-focus: 0 0 0 4px color-mix(in oklch, var(--brand-navy) 22%, transparent);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* =========================================================================
     MOTION — gentle ease-out, no bounces. 160–260ms sweet spot.
     ========================================================================= */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.6, 0, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     260ms;

  /* =========================================================================
     LAYOUT — app chrome metrics
     ========================================================================= */
  --app-nav-h:         60px;
  --app-sidebar-w:     260px;
  --container-max:     1200px;
  --reading-max:       68ch;
}

/* ==========================================================================
   SEMANTIC RESETS — put these vars to use as global element defaults
   ========================================================================== */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: normal;
}

body { margin: 0; line-height: var(--lh-normal); }

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-family: var(--font-display);
  margin: 0 0 var(--s-4) 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-36); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-30); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-24); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h6 {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--fg-3);
}

p  { margin: 0 0 var(--s-4) 0; font-size: var(--fs-16); line-height: var(--lh-relaxed); text-wrap: pretty; }
small { font-size: var(--fs-13); color: var(--fg-3); }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--brand-navy-800);
}

::selection { background: var(--brand-orange-200); color: var(--brand-navy-800); }

/* Focus ring used across interactive elements */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-md);
}