/* ==========================================================================
   Finanzteam SSR Design System — Colors & Type
   Aligned to Zurich Gruppe CI. German market.
   ========================================================================== */

/* --- Webfont ---------------------------------------------------------------
   Hausschrift: "Zurich Sans" (lizenzierte Brand-Webfonts, in fonts/).
   Vollständige Familie inkl. Italics, Light → Bold.
   Mono: Source Code Pro über Google Fonts (nur für tabellarische Zahlen).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap');

/* Light 300 */
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 300; font-style: normal; font-display: swap;
  src: url('fonts/ZurichSans-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 300; font-style: italic; font-display: swap;
  src: url('fonts/ZurichSans-LightItalic.ttf') format('truetype');
}
/* Regular 400 */
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/ZurichSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 400; font-style: italic; font-display: swap;
  src: url('fonts/ZurichSans-Italic.ttf') format('truetype');
}
/* Medium 500 */
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/ZurichSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 500; font-style: italic; font-display: swap;
  src: url('fonts/ZurichSans-MediumItalic.ttf') format('truetype');
}
/* SemiBold 600 */
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/ZurichSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 600; font-style: italic; font-display: swap;
  src: url('fonts/ZurichSans-SemiBoldItalic.ttf') format('truetype');
}
/* Bold 700 */
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/ZurichSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Zurich Sans';
  font-weight: 700; font-style: italic; font-display: swap;
  src: url('fonts/ZurichSans-BoldItalic.ttf') format('truetype');
}

:root {
  /* ---------- Color: Brand --------------------------------------------- */
  --zurich-blue:        #2167AE;   /* Primary — Zurich CI cerulean */
  --zurich-blue-deep:   #0F4C81;   /* Hover / pressed / dense type */
  --zurich-blue-bright: #1F7ABC;   /* Sampled SSR logo blue */
  --zurich-blue-50:     #E8F0F8;   /* Tinted bg, soft hover */
  --zurich-blue-10:     #F4F8FC;   /* Subtle wash */

  /* ---------- Color: Neutral ------------------------------------------- */
  --sand:               #EFEAE0;   /* Section break / panel */
  --sand-deep:          #E2D9C5;   /* Sand-on-sand cards */
  --white:              #FFFFFF;
  --ink:                #1A1A1A;   /* Default body */
  --gray-90:            #2D2D2D;
  --gray-60:            #6B6B6B;   /* Captions */
  --gray-40:            #A6A6A6;
  --gray-30:            #C9C9C9;   /* Borders, dividers */
  --gray-15:            #E6E6E6;   /* Subtle dividers */
  --gray-05:            #F6F6F6;

  /* ---------- Color: Semantic ------------------------------------------ */
  --success:            #2E7D4F;
  --success-bg:         #E8F3EC;
  --warning:            #B5751B;
  --warning-bg:         #FBF1E0;
  --danger:             #B5341B;
  --danger-bg:          #FBE8E4;

  /* ---------- Color: Foreground / Background tokens -------------------- */
  --fg-1:               var(--zurich-blue);   /* Primary foreground */
  --fg-2:               var(--ink);           /* Body text */
  --fg-3:               var(--gray-60);       /* Muted */
  --fg-on-blue:         var(--white);
  --bg-1:               var(--white);
  --bg-2:               var(--sand);
  --bg-3:               var(--zurich-blue-50);
  --bg-flood:           var(--zurich-blue);
  --border:             var(--gray-30);
  --border-strong:      var(--gray-60);

  /* ---------- Type: Family --------------------------------------------- */
  --font-sans:    'Zurich Sans', 'Source Sans 3', 'Frutiger LT', 'Frutiger', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Zurich Sans', 'Source Sans 3', 'Frutiger LT', 'Frutiger', 'Helvetica Neue', sans-serif;
  --font-mono:    'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type: Scale (px / weight / line-height) ------------------ */
  --type-display-size: 64px;  --type-display-weight: 600; --type-display-lh: 1.05;
  --type-h1-size:      48px;  --type-h1-weight:      600; --type-h1-lh:      1.1;
  --type-h2-size:      36px;  --type-h2-weight:      600; --type-h2-lh:      1.15;
  --type-h3-size:      24px;  --type-h3-weight:      600; --type-h3-lh:      1.25;
  --type-h4-size:      20px;  --type-h4-weight:      600; --type-h4-lh:      1.3;
  --type-lead-size:    20px;  --type-lead-weight:    400; --type-lead-lh:    1.5;
  --type-body-size:    16px;  --type-body-weight:    400; --type-body-lh:    1.55;
  --type-small-size:   14px;  --type-small-weight:   400; --type-small-lh:   1.5;
  --type-tiny-size:    12px;  --type-tiny-weight:    500; --type-tiny-lh:    1.4;
  --type-mono-size:    14px;

  /* Eyebrow (small uppercase) */
  --type-eyebrow-size: 12px;
  --type-eyebrow-tracking: 0.12em;

  /* ---------- Spacing (8pt grid) --------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* ---------- Radius --------------------------------------------------- */
  --r-0: 0;
  --r-1: 4px;     /* buttons, inputs */
  --r-2: 8px;     /* cards */
  --r-pill: 999px;

  /* ---------- Shadow --------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 76, 129, 0.06);
  --shadow-2: 0 4px 12px rgba(15, 76, 129, 0.08);
  --shadow-3: 0 12px 32px rgba(15, 76, 129, 0.12);

  /* ---------- Motion --------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ---------- Layout --------------------------------------------------- */
  --container-max: 1280px;
  --container-bleed: 1440px;
  --gutter: 32px;
  --header-h: 80px;
}

/* ===== Base ============================================================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Semantic type ===================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--s-4) 0;
  text-wrap: balance;
}

.display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  font-weight: var(--type-display-weight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 var(--s-5) 0;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: var(--type-h1-weight); letter-spacing: -0.012em; }
h2, .h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: var(--type-h2-weight); letter-spacing: -0.008em; }
h3, .h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--type-h3-weight); }
h4, .h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: var(--type-h4-weight); }

p, .body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  margin: 0 0 var(--s-4) 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  font-weight: var(--type-lead-weight);
  color: var(--fg-2);
  margin: 0 0 var(--s-5) 0;
  text-wrap: pretty;
}

.small, small {
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--fg-3);
}

.caption {
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--gray-60);
}

.eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--fg-1);
  margin: 0 0 var(--s-3) 0;
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--zurich-blue-deep); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--zurich-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; }

::selection { background: var(--zurich-blue); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}