/* ============================================================
   GenehmigungsOS — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Mobile-first. Formal Sie. Sachlich-modern Industrial-SaaS.
   ============================================================ */

/* ---------- Webfont ---------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: brand ---------- */
  --color-primary:        #0F1E3D;   /* navy — headlines, primary text, dark sections */
  --color-primary-hover:  #0A1530;
  --color-accent:         #00BEA2;   /* teal — CTA, focus, progress (matches logo „OS") */
  --color-accent-hover:   #009E87;
  --color-accent-soft:    #D5F1EB;   /* tinted bg for success / info chips */
  --color-accent-lime:    #A0DC3A;   /* secondary brand accent (gradient start) */

  /* ---------- Color: neutrals ---------- */
  --color-bg:             #FAFAF7;   /* page ground, warm off-white */
  --color-surface:        #FFFFFF;   /* cards lifted off bg */
  --color-surface-2:      #F1F0EA;   /* subtle hover, alt rows */
  --color-border:         #E3E1D8;   /* default hairline */
  --color-border-strong:  #C8C6BC;   /* hover/active border */
  --color-text:           #3A3D38;   /* body text */
  --color-text-muted:     #8A8B83;   /* secondary, captions */
  --color-text-strong:    #0F1E3D;   /* headings (= primary) */
  --color-text-on-dark:   #FAFAF7;   /* body text on navy ground */
  --color-text-on-accent: #FFFFFF;   /* text on green button */

  /* ---------- Color: semantic ---------- */
  --color-success:        #00BEA2;
  --color-success-soft:   #D5F1EB;
  --color-warning:        #B7791F;
  --color-warning-soft:   #FAEFD8;
  --color-danger:         #B23A3A;
  --color-danger-soft:    #F7E4E4;
  --color-info:           #00BEA2;
  --color-info-soft:      #D5F1EB;

  /* ---------- Type: families ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type: weights ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ---------- Type: scale (px) ---------- */
  --fs-tiny:    12px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-h3:      18px;
  --fs-h2:      24px;
  --fs-h1:      32px;
  --fs-display: 40px;

  /* ---------- Type: line height ---------- */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

  /* ---------- Type: tracking ---------- */
  --tracking-display: -0.015em;
  --tracking-h1:      -0.01em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.05em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --space-05:  2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---------- Borders ---------- */
  --border-thin:   1px;
  --border-thick:  1.5px;
  --border-focus:  2px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 0 0 rgba(15, 30, 61, 0.04),
               0 1px 2px 0 rgba(15, 30, 61, 0.04);
  --shadow-md: 0 4px 12px -4px rgba(15, 30, 61, 0.08),
               0 2px 4px -2px rgba(15, 30, 61, 0.04);
  --shadow-focus: 0 0 0 2px #FFFFFF,
                  0 0 0 4px var(--color-accent);
  --gradient-brand: linear-gradient(135deg, #A0DC3A 0%, #00BEA2 100%);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:      120ms;
  --dur-base:      150ms;
  --dur-slow:      240ms;

  /* ---------- Layout ---------- */
  --container-survey:    640px;
  --container-marketing: 1120px;
  --gutter-mobile:  20px;
  --gutter-tablet:  48px;
  --gutter-desktop: 64px;

  /* ---------- Component sizing ---------- */
  --control-height:    44px;          /* min 44 for hit target */
  --control-pad-x:     16px;
  --progress-height:   6px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11"; /* Geist's stylistic alts */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, h2, h3, h4 {
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  margin: 0;
  text-wrap: balance;
}

h1.display, .display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.small  { font-size: var(--fs-small); line-height: var(--lh-normal); }
.tiny   { font-size: var(--fs-tiny); line-height: var(--lh-normal); }
.eyebrow {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.mono   { font-family: var(--font-mono); font-size: var(--fs-small); }

a {
  color: var(--color-text-strong);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--color-accent-soft); color: var(--color-text-strong); }

/* Focus ring (apply via :focus-visible in components) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}