/* ============================================================
   SGV Design System — Tokens
   ------------------------------------------------------------
   Source of truth: SGV/plakart Tailwind-flavoured SCSS variables
   (User-provided May 2026). Translated 1:1 to plain CSS custom
   properties so the system works without a SCSS toolchain.

   Brand palette:
   - Primary : #00418A (SGV deep blue) — main accent, CTA, links
   - Secondary: #89BD3C (SGV leaf green) — supporting accent
   - Footer  : #0071B5 (medium blue) — dedicated footer band
   - Gray    : #EAEAEA / #373636 — neutrals
   ============================================================ */

/* ---- Public Sans — lokal eingebunden (Variable Font) ------- */
@font-face {
  font-family: "Public Sans Local";
  src: url("./fonts/PublicSans.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans Local";
  src: url("./fonts/PublicSans-Italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ============ COLOUR ============ */

  /* Brand — primary blue */
  --color-primary:      #00418A;
  --color-primary-light: #1a5aa3;  /* lighten ~10% */
  --color-primary-dark:  #002f63;  /* darken  ~10% */

  /* Brand — secondary green */
  --color-secondary:       #89BD3C;
  --color-secondary-light: #9dca58;
  --color-secondary-dark:  #6f9a30;

  /* SGV neutrals */
  --color-gray:         #EAEAEA;
  --color-gray-light:   #EAEAEA;
  --color-gray-dark:    #373636;
  --color-blue-light:   #EFF8FF;
  --color-footer:       #0071B5;
  --color-border:       var(--color-gray-light);

  /* Pure */
  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- PRIMARY tint/shade scale via color-mix(oklab)
     The user's SCSS uses color-mix(); we expose the same -10 … -190 names.
     -10 = 10% lighter; -190 = 90% darker (linear scale).               */
  --color-primary-10:  color-mix(in oklab, var(--color-primary), var(--color-white) 10%);
  --color-primary-20:  color-mix(in oklab, var(--color-primary), var(--color-white) 20%);
  --color-primary-30:  color-mix(in oklab, var(--color-primary), var(--color-white) 30%);
  --color-primary-40:  color-mix(in oklab, var(--color-primary), var(--color-white) 40%);
  --color-primary-50:  color-mix(in oklab, var(--color-primary), var(--color-white) 50%);
  --color-primary-60:  color-mix(in oklab, var(--color-primary), var(--color-white) 60%);
  --color-primary-70:  color-mix(in oklab, var(--color-primary), var(--color-white) 70%);
  --color-primary-80:  color-mix(in oklab, var(--color-primary), var(--color-white) 80%);
  --color-primary-90:  color-mix(in oklab, var(--color-primary), var(--color-white) 90%);
  --color-primary-110: color-mix(in oklab, var(--color-primary), var(--color-black) 10%);
  --color-primary-120: color-mix(in oklab, var(--color-primary), var(--color-black) 20%);
  --color-primary-130: color-mix(in oklab, var(--color-primary), var(--color-black) 30%);
  --color-primary-140: color-mix(in oklab, var(--color-primary), var(--color-black) 40%);
  --color-primary-150: color-mix(in oklab, var(--color-primary), var(--color-black) 50%);
  --color-primary-160: color-mix(in oklab, var(--color-primary), var(--color-black) 60%);
  --color-primary-170: color-mix(in oklab, var(--color-primary), var(--color-black) 70%);
  --color-primary-180: color-mix(in oklab, var(--color-primary), var(--color-black) 80%);
  --color-primary-190: color-mix(in oklab, var(--color-primary), var(--color-black) 90%);

  /* ---- SECONDARY tint/shade scale */
  --color-secondary-10:  color-mix(in oklab, var(--color-secondary), var(--color-white) 10%);
  --color-secondary-20:  color-mix(in oklab, var(--color-secondary), var(--color-white) 20%);
  --color-secondary-30:  color-mix(in oklab, var(--color-secondary), var(--color-white) 30%);
  --color-secondary-40:  color-mix(in oklab, var(--color-secondary), var(--color-white) 40%);
  --color-secondary-50:  color-mix(in oklab, var(--color-secondary), var(--color-white) 50%);
  --color-secondary-60:  color-mix(in oklab, var(--color-secondary), var(--color-white) 60%);
  --color-secondary-70:  color-mix(in oklab, var(--color-secondary), var(--color-white) 70%);
  --color-secondary-80:  color-mix(in oklab, var(--color-secondary), var(--color-white) 80%);
  --color-secondary-90:  color-mix(in oklab, var(--color-secondary), var(--color-white) 90%);
  --color-secondary-110: color-mix(in oklab, var(--color-secondary), var(--color-black) 10%);
  --color-secondary-120: color-mix(in oklab, var(--color-secondary), var(--color-black) 20%);
  --color-secondary-130: color-mix(in oklab, var(--color-secondary), var(--color-black) 30%);
  --color-secondary-140: color-mix(in oklab, var(--color-secondary), var(--color-black) 40%);
  --color-secondary-150: color-mix(in oklab, var(--color-secondary), var(--color-black) 50%);
  --color-secondary-160: color-mix(in oklab, var(--color-secondary), var(--color-black) 60%);
  --color-secondary-170: color-mix(in oklab, var(--color-secondary), var(--color-black) 70%);
  --color-secondary-180: color-mix(in oklab, var(--color-secondary), var(--color-black) 80%);
  --color-secondary-190: color-mix(in oklab, var(--color-secondary), var(--color-black) 90%);

  /* ---- GRAY tint/shade scale (anchored at #EAEAEA) */
  --color-gray-10:  color-mix(in oklab, var(--color-gray), var(--color-white) 10%);
  --color-gray-20:  color-mix(in oklab, var(--color-gray), var(--color-white) 20%);
  --color-gray-30:  color-mix(in oklab, var(--color-gray), var(--color-white) 30%);
  --color-gray-40:  color-mix(in oklab, var(--color-gray), var(--color-white) 40%);
  --color-gray-50:  color-mix(in oklab, var(--color-gray), var(--color-white) 50%);
  --color-gray-60:  color-mix(in oklab, var(--color-gray), var(--color-white) 60%);
  --color-gray-70:  color-mix(in oklab, var(--color-gray), var(--color-white) 70%);
  --color-gray-80:  color-mix(in oklab, var(--color-gray), var(--color-white) 80%);
  --color-gray-90:  color-mix(in oklab, var(--color-gray), var(--color-white) 90%);
  --color-gray-110: color-mix(in oklab, var(--color-gray), var(--color-black) 10%);
  --color-gray-120: color-mix(in oklab, var(--color-gray), var(--color-black) 20%);
  --color-gray-130: color-mix(in oklab, var(--color-gray), var(--color-black) 30%);
  --color-gray-140: color-mix(in oklab, var(--color-gray), var(--color-black) 40%);
  --color-gray-150: color-mix(in oklab, var(--color-gray), var(--color-black) 50%);
  --color-gray-160: color-mix(in oklab, var(--color-gray), var(--color-black) 60%);
  --color-gray-170: color-mix(in oklab, var(--color-gray), var(--color-black) 70%);
  --color-gray-180: color-mix(in oklab, var(--color-gray), var(--color-black) 80%);
  --color-gray-190: color-mix(in oklab, var(--color-gray), var(--color-black) 90%);

  /* Additional flat colours */
  --color-yellow-500: #9e9600;
  --color-red-500:    #7e0a0a;
  --color-green-500:  #038003;
  --color-blue-500:   #020271;

  /* Semantic states (Tailwind-flavour) */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* Convenience aliases */
  --color-fg:         var(--color-black);
  --color-fg-muted:   var(--color-gray-dark);
  --color-fg-subtle:  var(--color-gray-150);
  --color-fg-inverse: var(--color-white);
  --color-bg:         var(--color-white);
  --color-bg-surface: var(--color-white);
  --color-bg-sunken:  var(--color-blue-light);
  --color-link:       var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* ============ TYPOGRAPHY ============ */

  --font-family-sans:  "Public Sans Local", "Public Sans",
                       "Helvetica Neue", Arial, sans-serif;
  --font-family-serif: var(--font-family-sans);
  --font-family-mono:  var(--font-family-sans);
  --font-family-code:  ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --font-color:        #000;

  /* Font sizes — Tailwind scale, source of truth */
  --font-size-xs:    0.75rem;    /* 12 */
  --font-size-sm:    0.875rem;   /* 14 */
  --font-size-base:  1rem;       /* 16 */
  --font-size-lg:    1.125rem;   /* 18 */
  --font-size-xl:    1.25rem;    /* 20 */
  --font-size-2xl:   1.5rem;     /* 24 */
  --font-size-3xl:   1.875rem;   /* 30 */
  --font-size-4xl:   2.25rem;    /* 36 */
  --font-size-5xl:   3rem;       /* 48 */
  --font-size-6xl:   3.75rem;    /* 60 */
  --font-size-clamp: clamp(1rem, 1.125rem, 1.25rem);

  /* Weights */
  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   2;

  /* ============ SPACING ============ */
  --spacing-0:  0;
  --spacing-1:  0.25rem;  /* 4  */
  --spacing-2:  0.5rem;   /* 8  */
  --spacing-3:  0.75rem;  /* 12 */
  --spacing-4:  1rem;     /* 16 */
  --spacing-5:  1.25rem;  /* 20 */
  --spacing-6:  1.5rem;   /* 24 */
  --spacing-8:  2rem;     /* 32 */
  --spacing-10: 2.5rem;   /* 40 */
  --spacing-12: 3rem;     /* 48 */
  --spacing-16: 4rem;     /* 64 */
  --spacing-20: 5rem;     /* 80 */
  --spacing-24: 6rem;     /* 96 */
  --spacing-32: 8rem;     /* 128 */

  /* ============ RADII ============ */
  --border-radius-none: 0;
  --border-radius-sm:   0.125rem;  /* 2  */
  --border-radius-base: 0.25rem;   /* 4  */
  --border-radius-md:   0.375rem;  /* 6  */
  --border-radius-lg:   0.5rem;    /* 8  */
  --border-radius-xl:   0.75rem;   /* 12 */
  --border-radius-2xl:  1rem;      /* 16 */
  --border-radius-full: 9999px;

  /* Component-level radius — buttons are pill-like (20 px) */
  --border-radius-button: 1.25rem; /* 20 */

  /* ============ SHADOWS ============ */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ============ MOTION ============ */
  --transition-fast: 50ms  cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-slow: 350ms ease-out;

  /* ============ Z-INDEX ============ */
  --z-index-dropdown:       1000;
  --z-index-sticky:         1020;
  --z-index-fixed:          1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal:          1050;
  --z-index-popover:        1060;
  --z-index-tooltip:        1070;

  /* ============ BREAKPOINTS (reference) ============ */
  --breakpoint-xs:  0;
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;

  /* ============ LAYOUT ============ */
  --header-height:     130px;
  --container-max:     1440px;
  --max-width-content: 1680px;

  /* Focus ring uses the primary blue */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary), transparent 65%);
}

/* ============================================================
   Semantic element styles — opt-in by adding the `sgv` class
   to a root element so the tokens don't leak into other tools.
   ============================================================ */

.sgv,
.sgv * { box-sizing: border-box; }

.sgv {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--font-color);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Heading scale — Tailwind-style sizes, tight tracking on the larger ones */
.sgv h1, .sgv .h1 {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.015em;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-6);
}
.sgv h2, .sgv .h2 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-snug);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-5);
}
.sgv h3, .sgv .h3 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-4);
}
.sgv h4, .sgv .h4 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-3);
}
.sgv p { margin: 0 0 var(--spacing-4); text-wrap: pretty; }
.sgv .lede {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-dark);
}
.sgv small, .sgv .small { font-size: var(--font-size-sm); }
.sgv .micro { font-size: var(--font-size-xs); letter-spacing: 0.04em; }
.sgv .eyebrow {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}
.sgv .credit {
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-gray-150);
}

.sgv a { color: var(--color-link); text-decoration: none; }
.sgv a:hover { color: var(--color-link-hover); text-decoration: underline; }

.sgv :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--border-radius-base);
}

/* Buttons --------------------------------------------------- */
.sgv .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  padding: 0.875rem 1.375rem;
  border-radius: var(--border-radius-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  text-decoration: none;
}
.sgv .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.sgv .btn-primary:hover { background: var(--color-primary-dark); color: var(--color-white); text-decoration: none; }

.sgv .btn-secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}
.sgv .btn-secondary:hover { background: var(--color-secondary-dark); color: var(--color-white); text-decoration: none; }

.sgv .btn-outline {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.sgv .btn-outline:hover { background: var(--color-blue-light); text-decoration: none; }

.sgv .btn-ghost {
  background: transparent;
  color: var(--color-primary);
}
.sgv .btn-ghost:hover { background: var(--color-gray-light); text-decoration: none; }

/* Cards ----------------------------------------------------- */
.sgv .card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}
.sgv .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Inputs ---------------------------------------------------- */
.sgv .input,
.sgv input[type="text"],
.sgv input[type="email"],
.sgv input[type="search"],
.sgv textarea,
.sgv select {
  font: inherit;
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-base);
  color: var(--color-fg);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.sgv .input:focus,
.sgv input:focus,
.sgv textarea:focus,
.sgv select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* Badge ----------------------------------------------------- */
.sgv .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.625rem;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-gray-light);
  color: var(--color-gray-dark);
}
.sgv .badge-primary  { background: var(--color-blue-light); color: var(--color-primary); }
.sgv .badge-secondary{ background: color-mix(in oklab, var(--color-secondary), var(--color-white) 80%); color: var(--color-secondary-dark); }
.sgv .badge-success  { background: color-mix(in oklab, var(--color-success), var(--color-white) 80%); color: color-mix(in oklab, var(--color-success), var(--color-black) 20%); }
.sgv .badge-warning  { background: color-mix(in oklab, var(--color-warning), var(--color-white) 80%); color: color-mix(in oklab, var(--color-warning), var(--color-black) 20%); }
.sgv .badge-error    { background: color-mix(in oklab, var(--color-error), var(--color-white) 80%);   color: color-mix(in oklab, var(--color-error), var(--color-black) 20%); }

/* Containers / utility ------------------------------------- */
.sgv .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--spacing-8);
}
.sgv .container-wide {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding-inline: var(--spacing-8);
}
.sgv .section { padding-block: var(--spacing-24); }
.sgv .section--tight { padding-block: var(--spacing-16); }
.sgv .section--light { background: var(--color-blue-light); }
.sgv .section--primary { background: var(--color-primary); color: var(--color-white); }
.sgv .section--footer  { background: var(--color-footer);  color: var(--color-white); }

.sgv .divider {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin-block: var(--spacing-8);
}