/* =========================================================
   FAMILY DESKTOP DESIGN TOKENS
   Stil: heller Glassmorphism-Familien-Smart-Screen
   Hintergrund: blauer Himmel, leichte Wolken

   Quelle: ChatGPT-Konzept (2026-06).
   Aenderungen NICHT direkt am Block oben — sondern unten im
   Aliase-Abschnitt anhaengen, damit die ChatGPT-Quelle 1:1
   erkennbar bleibt.
   ========================================================= */
:root {
  /* ---------- Font ---------- */
  --font-family-base: "Inter", "Manrope", "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------- Background / Sky ---------- */
  --color-sky-top: #4eb8f2;
  --color-sky-mid: #9edcff;
  --color-sky-bottom: #dff5ff;
  --color-sky-cloud: rgba(255, 255, 255, 0.78);
  --color-sky-cloud-soft: rgba(255, 255, 255, 0.46);

  --background-main: linear-gradient(
    180deg,
    var(--color-sky-top) 0%,
    var(--color-sky-mid) 48%,
    var(--color-sky-bottom) 100%
  );

  /* ---------- Glass Surfaces ---------- */
  --glass-bg-light: rgba(255, 255, 255, 0.42);
  --glass-bg-default: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-bg-solid: rgba(245, 252, 255, 0.92);

  --glass-border-light: rgba(255, 255, 255, 0.42);
  --glass-border-default: rgba(255, 255, 255, 0.65);
  --glass-border-strong: rgba(255, 255, 255, 0.82);

  --glass-blur-sm: blur(10px);
  --glass-blur-md: blur(18px);
  --glass-blur-lg: blur(24px);
  --glass-blur-xl: blur(32px);

  /* ---------- Text Colors ---------- */
  --text-primary: #1f3347;
  --text-secondary: #48657c;
  --text-tertiary: #6f8ca3;
  --text-muted: #8ba4b7;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;

  /* ---------- Brand / Primary ---------- */
  --color-primary-50: #edf7ff;
  --color-primary-100: #d7eeff;
  --color-primary-200: #aadfff;
  --color-primary-300: #78ccff;
  --color-primary-400: #42b6f5;
  --color-primary-500: #1b99e5;
  --color-primary-600: #097ac2;
  --color-primary-700: #075f99;
  --color-primary-800: #084f7c;
  --color-primary-900: #0a4266;

  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-soft: rgba(27, 153, 229, 0.14);

  /* ---------- Semantic Colors ---------- */
  --color-success: #43b978;
  --color-success-soft: rgba(67, 185, 120, 0.16);
  --color-success-border: rgba(67, 185, 120, 0.35);

  --color-progress: #2f8fed;
  --color-progress-soft: rgba(47, 143, 237, 0.16);
  --color-progress-border: rgba(47, 143, 237, 0.35);

  --color-open: #8fa4b8;
  --color-open-soft: rgba(143, 164, 184, 0.16);
  --color-open-border: rgba(143, 164, 184, 0.35);

  --color-warning: #f4b84a;
  --color-warning-soft: rgba(244, 184, 74, 0.20);
  --color-warning-border: rgba(244, 184, 74, 0.42);

  --color-danger: #ef6b7a;
  --color-danger-soft: rgba(239, 107, 122, 0.18);
  --color-danger-border: rgba(239, 107, 122, 0.42);

  --color-info: #5db8f2;
  --color-info-soft: rgba(93, 184, 242, 0.16);
  --color-info-border: rgba(93, 184, 242, 0.38);

  /* ---------- Event Category Colors ---------- */
  --event-school-bg: rgba(104, 174, 245, 0.34);
  --event-school-text: #0f4f8a;
  --event-school-border: rgba(104, 174, 245, 0.52);

  --event-sport-bg: rgba(80, 193, 125, 0.34);
  --event-sport-text: #1c6d3d;
  --event-sport-border: rgba(80, 193, 125, 0.52);

  --event-doctor-bg: rgba(255, 149, 159, 0.34);
  --event-doctor-text: #9b2d42;
  --event-doctor-border: rgba(255, 149, 159, 0.52);

  --event-shopping-bg: rgba(255, 179, 86, 0.34);
  --event-shopping-text: #8a5014;
  --event-shopping-border: rgba(255, 179, 86, 0.52);

  --event-family-bg: rgba(171, 133, 255, 0.30);
  --event-family-text: #55359f;
  --event-family-border: rgba(171, 133, 255, 0.50);

  --event-music-bg: rgba(77, 201, 201, 0.30);
  --event-music-text: #176d74;
  --event-music-border: rgba(77, 201, 201, 0.50);

  --event-creative-bg: rgba(255, 211, 100, 0.38);
  --event-creative-text: #8a6500;
  --event-creative-border: rgba(255, 211, 100, 0.55);

  --event-work-bg: rgba(132, 151, 176, 0.24);
  --event-work-text: #435468;
  --event-work-border: rgba(132, 151, 176, 0.42);

  --event-household-bg: rgba(159, 214, 189, 0.32);
  --event-household-text: #2e6f59;
  --event-household-border: rgba(159, 214, 189, 0.52);

  --event-leisure-bg: rgba(239, 148, 217, 0.28);
  --event-leisure-text: #8d347b;
  --event-leisure-border: rgba(239, 148, 217, 0.48);

  /* ---------- Person Colors ---------- */
  --person-dennis: #2f8fed;
  --person-mama: #ef7aa7;
  --person-child: #43b978;
  --person-family: #8b6ee8;
  --person-guest: #f4b84a;

  /* ---------- Spacing Scale: 4px Grid ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Typography Scale ---------- */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;
  --font-size-clock-md: 72px;
  --font-size-clock-lg: 110px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 750;
  --font-weight-black: 900;

  --line-height-tight: 1.05;
  --line-height-normal: 1.35;
  --line-height-relaxed: 1.55;

  --letter-spacing-clock: -0.055em;
  --letter-spacing-heading: -0.025em;

  /* ---------- Border Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-pill: 999px;
  --radius-modal: 34px;

  /* ---------- Borders ---------- */
  --border-glass: 1px solid var(--glass-border-default);
  --border-glass-strong: 1px solid var(--glass-border-strong);
  --border-focus: 2px solid rgba(27, 153, 229, 0.65);

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 2px 8px rgba(40, 80, 120, 0.08);
  --shadow-sm: 0 8px 20px rgba(40, 80, 120, 0.10);
  --shadow-card: 0 18px 45px rgba(40, 80, 120, 0.16);
  --shadow-card-hover: 0 22px 55px rgba(40, 80, 120, 0.20);
  --shadow-calendar: 0 24px 60px rgba(40, 80, 120, 0.18);
  --shadow-fab: 0 16px 35px rgba(27, 153, 229, 0.28);
  --shadow-editbar: 0 18px 50px rgba(31, 51, 71, 0.18);
  --shadow-modal: 0 28px 80px rgba(20, 45, 70, 0.28);
  --shadow-overlay: 0 0 0 9999px rgba(15, 35, 55, 0.22);

  /* ---------- Layout Sizes ---------- */
  --header-height-kiosk: 92px;
  --header-height-mobile: 132px;

  --kiosk-padding: 24px;
  --mobile-padding: 16px;

  --calendar-min-height-kiosk: 520px;
  --widget-zone-height-kiosk: 260px;

  --card-padding-sm: 14px;
  --card-padding-md: 18px;
  --card-padding-lg: 24px;
  --card-padding-xl: 32px;

  /* ---------- Component Sizes ---------- */
  --button-height-sm: 36px;
  --button-height-md: 44px;
  --button-height-lg: 52px;

  --chip-height-sm: 28px;
  --chip-height-md: 34px;

  --icon-size-xs: 16px;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 44px;

  --touch-target-min: 48px;
  --touch-target-comfort: 56px;

  /* ---------- Z-Index ---------- */
  --z-background: 0;
  --z-content: 10;
  --z-header: 20;
  --z-floating: 40;
  --z-editbar: 50;
  --z-modal: 80;
  --z-toast: 100;

  /* ---------- Animation Timings ---------- */
  --duration-tap: 90ms;
  --duration-hover: 160ms;
  --duration-card: 220ms;
  --duration-page: 320ms;
  --duration-modal: 260ms;
  --duration-editmode: 240ms;
  --duration-weather-icon: 4200ms;
  --duration-cloud-slow: 90s;
  --duration-cloud-medium: 60s;
  --duration-cloud-fast: 42s;
  --duration-slideshow-crossfade: 900ms;

  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---------- Backdrop ---------- */
  --backdrop-blur-card: 18px;
  --backdrop-blur-header: 20px;
  --backdrop-blur-modal: 28px;

  /* ---------- Widget Grid ---------- */
  --widget-grid-columns-mobile: 1;
  --widget-grid-columns-tablet: 2;
  --widget-grid-columns-kiosk: 4;

  --widget-gap-mobile: 12px;
  --widget-gap-tablet: 16px;
  --widget-gap-kiosk: 18px;

  /* ---------- Calendar ---------- */
  --calendar-grid-line: rgba(72, 101, 124, 0.14);
  --calendar-grid-line-strong: rgba(72, 101, 124, 0.22);
  --calendar-today-bg: rgba(27, 153, 229, 0.12);
  --calendar-today-border: rgba(27, 153, 229, 0.52);
  --calendar-current-time: #1b99e5;

  /* ---------- Edit Mode ---------- */
  --edit-outline: rgba(27, 153, 229, 0.65);
  --edit-bg: rgba(255, 255, 255, 0.76);
  --edit-handle-bg: rgba(27, 153, 229, 0.16);
  --edit-remove-bg: rgba(239, 107, 122, 0.14);

  /* =========================================================
     LEGACY-ALIASE
     Verhindert, dass existierender Code beim Token-Umbau bricht.
     Diese Aliase werden mit dem CSS-Refactor schrittweise abgebaut.
     ========================================================= */

  --sky-1: var(--color-sky-top);
  --sky-2: var(--color-sky-mid);
  --ink:        var(--text-primary);
  --ink-soft:   var(--text-secondary);
  --glass:        var(--glass-bg-default);
  --glass-strong: var(--glass-bg-strong);
  --glass-inner:  var(--glass-bg-light);
  --border:       var(--glass-border-default);
  --radius:       var(--radius-2xl);
  --shadow:       var(--shadow-card);
  --c-dennis:  var(--person-dennis);
  --c-partner: var(--person-mama);
  --c-child:   var(--person-child);
  --c-family:  var(--person-family);

  /* iOS Safe-Area-Insets (waren bisher in app.css). */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
}