/* ==========================================================================
   Vorbild — Design-Tokens
   Quelle: Stitch-Design-System „Berufsbrücke"
   (design/stitch/perplexity/DESIGN-SYSTEM-berufsbruecke.md)

   Alle Werte stammen aus dem Design-System bzw. aus den 21 Stitch-Screens,
   die sämtlich token-identisch sind. Nichts hier ist erfunden.
   In Komponenten NUR diese Variablen verwenden, keine Hex-Werte.
   ========================================================================== */

:root {
  /* --- Markenfarben (Quellfarben des Systems) --------------------------- */
  --brand-petrol:            #0f2942;  /* Deep Petrol, Leitfarbe */
  --brand-emerald:           #18794e;  /* Erfolg, gemeisterte Kompetenz */
  --brand-amber:             #d97706;  /* Meilensteine, Sicherheitshinweise */
  --brand-neutral:           #64748b;

  /* --- Flächen ---------------------------------------------------------- */
  --surface:                 #f8f9ff;
  --surface-dim:             #cbdbf5;
  --surface-bright:          #f8f9ff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:   #eff4ff;
  --surface-container:       #e5eeff;
  --surface-container-high:  #dce9ff;
  --surface-container-highest:#d3e4fe;
  --surface-variant:         #d3e4fe;
  --surface-tint:            #49607c;
  --background:              #f8f9ff;

  /* --- Schrift auf Flächen ---------------------------------------------- */
  --on-surface:              #0b1c30;
  --on-surface-variant:      #43474d;
  --on-background:           #0b1c30;
  --inverse-surface:         #213145;
  --inverse-on-surface:      #eaf1ff;

  /* --- Linien ----------------------------------------------------------- */
  --outline:                 #74777e;
  --outline-variant:         #c3c6ce;

  /* --- Primär (Navigation, Hauptaktion) --------------------------------- */
  --primary:                 #001428;
  --on-primary:              #ffffff;
  --primary-container:       #0f2942;
  --on-primary-container:    #7991af;
  --inverse-primary:         #b0c9e8;
  --primary-fixed:           #d1e4ff;
  --primary-fixed-dim:       #b0c9e8;
  --on-primary-fixed:        #011d35;
  --on-primary-fixed-variant:#314863;

  /* --- Sekundär (Erfolg, Fortschritt) ----------------------------------- */
  --secondary:               #006d43;
  --on-secondary:            #ffffff;
  --secondary-container:     #99f2bd;
  --on-secondary-container:  #087147;
  --secondary-fixed:         #9bf5c0;
  --secondary-fixed-dim:     #80d9a5;
  --on-secondary-fixed:      #002111;
  --on-secondary-fixed-variant:#005231;

  /* --- Tertiär (Meilensteine, Warnungen) -------------------------------- */
  --tertiary:                #220e00;
  --on-tertiary:             #ffffff;
  --tertiary-container:      #401f00;
  --on-tertiary-container:   #d77503;
  --tertiary-fixed:          #ffdcc3;
  --tertiary-fixed-dim:      #ffb77d;
  --on-tertiary-fixed:       #2f1500;
  --on-tertiary-fixed-variant:#6e3900;

  /* --- Fehler ----------------------------------------------------------- */
  --error:                   #ba1a1a;
  --on-error:                #ffffff;
  --error-container:         #ffdad6;
  --on-error-container:      #93000a;

  /* --- Sprach-Kennzeichnung (zweisprachige Annotationen) ---------------- */
  --lang-hu:                 #1e3a5f;  /* Ungarisch-Tag */
  --lang-ro:                 #1e293b;  /* Rumänisch-Tag */
  --lang-uk:                 var(--outline);  /* Platzhalter, gesperrt */

  /* --- Typografie ------------------------------------------------------- */
  --font-family:             'Source Sans 3', system-ui, sans-serif;
  --font-family-certificate: 'Cinzel', Georgia, serif;  /* nur Zertifikate */

  --headline-xl-size:   32px; --headline-xl-line:   40px; --headline-xl-weight: 700; --headline-xl-spacing: -0.02em;
  --headline-lg-size:   26px; --headline-lg-line:   34px; --headline-lg-weight: 700; --headline-lg-spacing: -0.015em;
  --headline-md-size:   22px; --headline-md-line:   30px; --headline-md-weight: 600; --headline-md-spacing: -0.01em;
  --title-md-size:      20px; --title-md-line:      28px; --title-md-weight:    600;
  --body-lg-size:       18px; --body-lg-line:       28px; --body-lg-weight:     400;
  --body-lg-bold-weight:600;
  --body-md-size:       16px; --body-md-line:       24px; --body-md-weight:     400;
  --body-md-bold-weight:600;
  --annotation-de-size: 18px; --annotation-de-line: 26px; --annotation-de-weight: 600;
  --annotation-sub-size:14px; --annotation-sub-line:20px; --annotation-sub-weight:500;
  --label-md-size:      15px; --label-md-line:      20px; --label-md-weight:    600; --label-md-spacing: 0.01em;
  --label-sm-size:      13px; --label-sm-line:      18px; --label-sm-weight:    600; --label-sm-spacing: 0.02em;

  /* --- Radien --------------------------------------------------------- */
  /* ACHTUNG: Maßgeblich sind die gerenderten Stitch-Screens, nicht die
     Prosa des Design-System-Dokuments — die nennt eine andere Skala
     (sm .25 / DEFAULT .5 / md .75 / lg 1 / xl 1.5rem). Die 21 Screens
     verwenden durchgehend diese hier. Siehe design/DESIGN.md. */
  --radius:         0.25rem;  /* Chips, kleine Marker */
  --radius-md:      0.375rem; /* Abzeichen */
  --radius-lg:      0.5rem;   /* Buttons, Eingaben, Icon-Flächen, Innenboxen */
  --radius-xl:      0.75rem;  /* Karten und Sektionen */
  --radius-full:    9999px;   /* Fortschritt, Status-Punkte, Avatare, Häkchen */

  /* --- Abstände (8pt-Raster) -------------------------------------------- */
  --touch-target-min:        3rem;     /* 48px, Mindestgröße jeder Tippfläche */
  --edge-margin-mobile:      1.25rem;  /* 20px Seitenrand mobil */
  --edge-margin-tablet:      2rem;
  --card-padding-comfortable:1.25rem;
  --card-padding-compact:    1rem;
  --stack-gap-tight:         0.5rem;
  --stack-gap-regular:       1rem;
  --stack-gap-loose:         1.5rem;
  --section-gap:             2rem;

  /* --- Mindesthöhen ----------------------------------------------------- */
  --button-height:           52px;  /* über dem 48px-Mindestmaß */
  --input-height:            52px;
  --choice-row-height:       56px;  /* Antwortzeilen, Mehrfachauswahl */

  /* --- Erhebung --------------------------------------------------------- */
  --elevation-xs: 0 1px 2px  rgba(15, 41, 66, 0.04);
  --elevation-1:  0 2px 4px  rgba(15, 41, 66, 0.04);
  --elevation-2:  0 4px 12px rgba(15, 41, 66, 0.06);
  --elevation-3:  0 -4px 16px rgba(15, 41, 66, 0.06);  /* Bottom-Nav */
  --elevation-shell: 0 25px 50px -12px rgba(15, 41, 66, 0.25);
  --focus-ring:   0 0 0 3px  rgba(15, 41, 66, 0.12);

  /* --- Rahmen ----------------------------------------------------------- */
  --border-card:      1px solid #e2e8f0;
  --border-input:     1.5px solid #cbd5e1;
  --border-active:    2px solid var(--brand-petrol);
  --border-success:   2px solid var(--brand-emerald);
  --border-error:     2px solid #dc2626;
  --border-floating:  1px solid #cbd5e1;

  /* --- Berufsfeld-Banner (Bernstein, wie in den Screens) ---------------- */
  --amber-50:  #fffbeb;
  --amber-300: #fcd34d;
  --amber-900: #78350f;

  /* --- Layout ----------------------------------------------------------- */
  --shell-width: 28rem;   /* 448px — max-w-md wie in allen Stitch-Screens */
  --content-max-width: 28rem;
}

/* Grundlayout: Mobile-first, 375px aufwärts, kein waagerechtes Scrollen. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  display: flex;
  justify-content: center;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-family);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  -webkit-text-size-adjust: 100%;
}

/* Kein Fließtext unter 16px — Vorgabe des Design-Systems. */