/*
 * SwimSafe Design System — Unified Theme
 * Gilt für alle Bereiche: Public, Auth, Admin.
 * Tokens sind in tokens/*.css definiert und werden separat per <link> geladen.
 * Diese Datei enthält Reset + Base-Styles + DS-Utility-Klassen.
 *
 * MIGRATION: Diese Datei ersetzt das alte swoom-theme.css (Manrope, --swoom-blue-*).
 * Sobald die Token-Files als separate <link> eingebunden sind,
 * kann diese Datei in base.css umbenannt werden.
 * Bis dahin enthält sie die Tokens inline als Übergangslösung.
 */

/* ===== INLINE TOKENS (Übergang bis Token-Files separiert sind) ===== */

/* Fonts: selbst gehostet via tokens/fonts.css (per <link> im Template geladen) */

:root {
  /* Fonts */
  --font-display: 'Fredoka', sans-serif;
  --font-body:    'Nunito', sans-serif;

  /* Ozeanblau · primary */
  --ocean-50:  #EAF1FF;
  --ocean-100: #D8E6FF;
  --ocean-200: #CFE3FA;
  --ocean-400: #2E86F0;
  --ocean-600: #1463D6;
  --ocean-800: #1147A8;
  --ocean-900: #0C2A4D;

  /* Aquamarin · secondary / success */
  --aqua-50:  #E4FAF7;
  --aqua-200: #7FE9DF;
  --aqua-400: #1FD4C9;
  --aqua-500: #1FB3AA;
  --aqua-600: #0E9E97;

  /* Sonnengelb · accent / reward */
  --sun-50:  #FFF6E5;
  --sun-100: #FFF1D2;
  --sun-400: #FBBF1C;
  --sun-600: #F4A509;
  --sun-800: #C77F00;

  /* Ink / Neutrals */
  --ink-900: #0C2A4D;
  --ink-600: #3f5b78;
  --ink-400: #5b78a0;
  --ink-300: #6e89a6;
  --ink-200: #9fb2c9;
  --ink-100: #E8F0F8;
  --ink-50:  #EEF4FB;

  /* Surfaces */
  --bg-main: #F4F9FF;
  --bg-soft: #EEF4FB;
  --card:    #FFFFFF;

  /* Semantic */
  --color-success: #1FB3AA;
  --color-warning: #FBBF1C;
  --color-error:   #E8642A;
  --color-info:    #1463D6;
  --color-new:     #7C5CE0;

  /* Tints */
  --tint-aqua:     #E4FAF7;
  --tint-sun:      #FFF1D2;
  --tint-ocean:    #EAF1FF;
  --tint-lavender: #F0EAFE;
  --tint-coral:    #FDEAE1; /* DS --coral-100 */

  /* Gradients */
  --grad-cta:    linear-gradient(135deg, #1B8FE0, #1147A8);
  --grad-cta-hover: linear-gradient(135deg, #1463D6, #0C2A4D);
  --grad-ocean:  linear-gradient(150deg, #1FD4C9, #1B8FE0 55%, #1147A8);
  --grad-reward: linear-gradient(150deg, #FBBF1C, #F4A509);
  --grad-aqua:   linear-gradient(135deg, #1FD4C9, #0E9E97);
  --grad-deep:   linear-gradient(180deg, #CFF0FB, #5FC0E8 70%, #2E9FD6);

  /* Typography */
  --text-display: clamp(38px, 5vw, 66px);
  --text-h1:      31px;
  --text-h2:      22px;
  --text-h3:      17px;
  --text-body-lg: 16.5px;
  --text-body:    14.5px;
  --text-sm:      13px;
  --text-xs:      11.5px;
  --text-xxs:     11px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight:  -0.04em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;
  --tracking-label:   0.16em;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* Spacing (8px grid) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-screen: 22px;
  --space-gutter: 14px;

  /* Radii */
  --radius-sm:    10px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-xl:    22px;
  --radius-2xl:   26px;
  --radius-sheet: 36px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-card:       0 8px 22px rgba(12,42,77,.06);
  --shadow-hover:      0 14px 30px rgba(12,42,77,.12);
  --shadow-cta-ocean:  0 14px 26px rgba(20,99,214,.34);
  --shadow-cta-ocean-hover: 0 18px 36px rgba(12,42,77,.32), 0 12px 26px rgba(20,99,214,.34);
  --shadow-cta-aqua:   0 14px 26px rgba(31,212,201,.34);
  --shadow-reward:     0 12px 26px rgba(244,165,9,.4);

  /* Motion (ported from DS css/motion.css) */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-instant: 80ms;
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   480ms;
  --dur-enter:  700ms;
  --stagger:    60ms;
}

/* ===== RESET ===== */

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-semibold); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-1); }

a {
  color: var(--ocean-600);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--ocean-800);
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--ink-100);
  margin: var(--space-2) 0;
}

ul, ol {
  margin: var(--space-1) 0;
  padding-left: var(--space-3);
}

li { margin-bottom: var(--space-1); }

/* ===== FORMS ===== */

input, select, textarea {
  width: 100%;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-900);
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
}

textarea { min-height: 7rem; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ocean-400);
  box-shadow: 0 0 0 3px rgba(46,134,240,.15);
}

/* ===== BASE BUTTONS ===== */

button, .btn, input[type="submit"] {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

button:hover, button:focus,
.btn:hover, .btn:focus,
input[type="submit"]:hover, input[type="submit"]:focus {
  background: var(--bg-soft);
  box-shadow: var(--shadow-card);
}

/* CTA Buttons */
.btn--cta-ocean {
  border: none;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-cta-ocean);
  padding: 0 var(--space-3);
  height: 50px;
}

@media (hover: hover) {
  .btn--cta-ocean:hover {
    background: var(--grad-cta-hover);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-cta-ocean-hover);
  }
}

.btn--cta-ocean:active {
  transform: translateY(1px) scale(.985);
}

.btn--cta-ocean:focus {
  background: var(--grad-cta);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-cta-ocean);
}

.btn--cta-ocean:focus-visible {
  outline: 3px solid rgba(127,233,223,.9);
  outline-offset: 3px;
}

.btn--cta-aqua {
  border: none;
  border-radius: var(--radius-pill);
  background: var(--grad-aqua);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-cta-aqua);
  padding: 0 var(--space-3);
  height: 50px;
}

.btn--ghost {
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ocean-600);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-3);
  height: 50px;
}

/* ===== CHIPS / TAGS ===== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

.chip--aqua    { background: var(--tint-aqua);     color: var(--aqua-600); }
.chip--sun     { background: var(--tint-sun);      color: var(--sun-800); }
.chip--ocean   { background: var(--tint-ocean);    color: var(--ocean-600); }
.chip--neutral { background: var(--bg-soft);       color: var(--ink-300); }

/* ===== CARDS ===== */

.ss-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ===== TABLES ===== */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}

th, td {
  border: 1px solid var(--ink-100);
  padding: var(--space-1);
  text-align: left;
  font-size: var(--text-body);
}

th {
  background: var(--bg-soft);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

/* ===== DS TYPOGRAPHY UTILITIES ===== */

.ss-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.ss-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h1);
  letter-spacing: -0.4px;
}

.ss-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h2);
}

.ss-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ocean-600);
}

.ss-label {
  font-family: var(--font-body);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-200);
}

/* ===== PAGE LAYOUT ===== */

.swoom-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-screen);
}

@media (max-width: 480px) {
  .swoom-page {
    padding: var(--space-2) var(--space-gutter);
  }
}

/* ===== HEADER NAV (Admin + Public) ===== */

.swoom-header-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-1);
  row-gap: 4px;
  margin-bottom: var(--space-1);
}

.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.lang-switcher-label {
  font-size: var(--text-sm);
  color: var(--ink-600);
}

.lang-switcher-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lang-switcher-links a {
  padding: 3px 8px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.header-app-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
}

.header-app-nav a {
  padding: 3px 8px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.header-app-nav a.header-context-link {
  background: var(--grad-cta);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: var(--weight-semibold);
}

.header-app-nav a.header-context-link:hover,
.header-app-nav a.header-context-link:focus {
  background: var(--grad-cta);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-cta-ocean);
}

@media (hover: hover) {
  .header-app-nav a.header-context-link:hover {
    background: var(--grad-cta-hover);
    box-shadow: var(--shadow-cta-ocean-hover);
  }
}

@media (max-width: 480px) {
  .swoom-header-nav {
    grid-template-columns: 1fr;
  }
  .header-app-nav {
    justify-self: start;
    justify-content: flex-start;
  }
}

/* ===== ADMIN FORMS ===== */

form:not([style*="display:inline"]):not([style*="display: inline"]) {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
}

form[style*="display:inline"],
form[style*="display: inline"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

form[style*="display:inline"] button,
form[style*="display: inline"] button {
  padding: 4px 10px;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* ===== CODE ===== */

code {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: var(--text-sm);
}

/* ===== WELCOME PAGE ===== */

.swoom-page.welcome-page {
  max-width: none;
  padding: 0;
}

.welcome-shell {
  position: relative;
  min-height: 100vh;
  padding: clamp(1.2rem, 2vw, 2rem);
  background:
    radial-gradient(54rem 30rem at -8% 15%, rgba(20,99,214,.2), transparent 62%),
    radial-gradient(40rem 28rem at 100% 100%, rgba(31,212,201,.15), transparent 65%),
    linear-gradient(160deg, var(--bg-main) 0%, var(--card) 56%);
}

.welcome-shell .secret-login {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  color: var(--ocean-900);
  font-size: var(--text-xxs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 3px 6px;
  margin: 0;
  opacity: 0.08;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.welcome-shell .secret-login:hover,
.welcome-shell .secret-login:focus {
  opacity: 0.78;
  background: rgba(20,99,214,.08);
  text-decoration: none;
}

.welcome-hero {
  max-width: 900px;
  margin: 8vh auto 0;
  border: 1px solid var(--ocean-200);
  border-radius: var(--radius-2xl);
  background: var(--grad-cta);
  color: #fff;
  padding: clamp(1.2rem, 4vw, 3rem);
  box-shadow: var(--shadow-cta-ocean);
  animation: ss-welcome-rise var(--dur-enter) var(--ease-out);
}

.welcome-hero .eyebrow {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.welcome-hero h1 {
  color: #fff;
  margin: 0 0 var(--space-1);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: var(--leading-tight);
  max-width: 16ch;
}

.welcome-hero p {
  color: rgba(255,255,255,.9);
  margin: 0 0 var(--space-2);
  max-width: 52ch;
}

.welcome-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.welcome-note {
  margin: var(--space-2) auto 0;
  max-width: 900px;
  color: var(--ink-400);
  font-size: var(--text-sm);
}

/* ===== DS KEYFRAMES ===== */

@keyframes ss-welcome-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ss-bob       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes ss-ripple    { 0%{transform:scale(.4);opacity:.5} 100%{transform:scale(1.7);opacity:0} }
@keyframes ss-bar       { from{width:0} }
@keyframes ss-pop       { 0%{transform:scale(0);opacity:0} 80%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes ss-confetti  { 0%{transform:translateY(-10px) rotate(0);opacity:1} 100%{transform:translateY(120px) rotate(360deg);opacity:0} }
@keyframes ss-float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }