/*
 * Krone Manager — theme.
 *
 * Pulls Telegram's runtime theme variables (--tg-theme-*) and maps them to
 * a small set of semantic tokens used in app.css. Honors the user's CLAUDE.md
 * preferences: no rounded borders, no shadows, no animations, no gradients;
 * basic colors (blue/red/yellow/green) + soft dark grey instead of black;
 * macOS-style restraint.
 *
 * NOTE: never use 100vh — broken on iOS in Telegram. Use --tg-viewport-stable-height.
 */

:root {
	/* Telegram-provided variables (with sensible fallbacks if missing) */
	--bg:                  var(--tg-theme-bg-color, #2c2c2c);
	--bg-secondary:        var(--tg-theme-secondary-bg-color, #1f1f1f);
	--bg-section:          var(--tg-theme-section-bg-color, #2c2c2c);
	--bg-header:           var(--tg-theme-header-bg-color, #1a1a1a);
	--text:                var(--tg-theme-text-color, #f0f0f0);
	--text-hint:           var(--tg-theme-hint-color, #999);
	--text-link:           var(--tg-theme-link-color, #4ea0ff);
	--text-subtitle:       var(--tg-theme-subtitle-text-color, #999);
	--text-section-header: var(--tg-theme-section-header-text-color, #c0c0c0);
	--accent:              var(--tg-theme-accent-text-color, #4ea0ff);
	--btn-bg:              var(--tg-theme-button-color, #4ea0ff);
	--btn-fg:              var(--tg-theme-button-text-color, #ffffff);
	--separator:           var(--tg-theme-section-separator-color, #404040);
	--destructive:         var(--tg-theme-destructive-text-color, #e64646);

	/* App-specific tokens (semantic, derived from Telegram) */
	--ok:    #2da92d;   /* FREI / booked / done */
	--warn:  #d49613;   /* waiting / yellow */
	--error: var(--destructive);
	--info:  var(--text-link);

	/* Layout (macOS-restraint: no rounded corners) */
	--radius: 0;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* iOS Telegram WebView: respect notch / home-indicator safe areas */
body {
	padding-top: env(safe-area-inset-top, 0);
	padding-bottom: env(safe-area-inset-bottom, 0);
}