/* Soulfire Mini App - Base Styles */

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

* {
	margin: 0;
	padding: 0;
}

/* Soulfire Brand Variables */
:root {
	/* Brand colors */
	--sf-orange: #FF6B35;
	--sf-orange-light: #FF8A5C;
	--sf-orange-dark: #E55A2B;

	/* Fallback colors (before Telegram vars are bound) */
	--sf-bg: #ffffff;
	--sf-text: #1a1a1a;
	--sf-text-secondary: #666666;
	--sf-card-bg: #f5f5f5;

	/* Typography */
	--sf-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--sf-font-size-base: 16px;
	--sf-font-size-sm: 14px;
	--sf-font-size-lg: 18px;
	--sf-font-size-xl: 24px;
	--sf-line-height: 1.5;

	/* Spacing */
	--sf-spacing-xs: 4px;
	--sf-spacing-sm: 8px;
	--sf-spacing-md: 16px;
	--sf-spacing-lg: 24px;
	--sf-spacing-xl: 32px;

	/* Border radius */
	--sf-radius-sm: 4px;
	--sf-radius-md: 8px;
	--sf-radius-lg: 12px;
}

/*
 * Telegram Theme Variables (placeholder)
 * These will be bound by @telegram-apps/sdk-svelte in Plan 03
 *
 * Available variables when running in Telegram:
 * --tg-theme-bg-color
 * --tg-theme-text-color
 * --tg-theme-hint-color
 * --tg-theme-link-color
 * --tg-theme-button-color
 * --tg-theme-button-text-color
 * --tg-theme-secondary-bg-color
 * --tg-theme-header-bg-color
 * --tg-theme-accent-text-color
 * --tg-theme-section-bg-color
 * --tg-theme-section-header-text-color
 * --tg-theme-subtitle-text-color
 * --tg-theme-destructive-text-color
 * --tg-theme-bottom-bar-bg-color
 */

/* Base document */
html {
	font-family: var(--sf-font-family);
	font-size: var(--sf-font-size-base);
	line-height: var(--sf-line-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

html,
body {
	height: 100dvh;
	width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--sf-bg);
	color: var(--sf-text);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
}

h1 {
	font-size: var(--sf-font-size-xl);
}

h2 {
	font-size: var(--sf-font-size-lg);
}

p {
	margin-bottom: var(--sf-spacing-md);
}

a {
	color: var(--sf-orange);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Utility classes */
.sf-container {
	padding: var(--sf-spacing-md);
	max-width: 100%;
}

.sf-card {
	background-color: var(--sf-card-bg);
	border-radius: var(--sf-radius-lg);
	padding: var(--sf-spacing-md);
}

.sf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sf-spacing-sm) var(--sf-spacing-md);
	background-color: var(--sf-orange);
	color: white;
	border: none;
	border-radius: var(--sf-radius-md);
	font-size: var(--sf-font-size-base);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sf-button:hover {
	background-color: var(--sf-orange-dark);
}

.sf-button:active {
	transform: scale(0.98);
}

/* Safe area handling for notched devices */
@supports (padding: env(safe-area-inset-top)) {
	.sf-safe-top {
		padding-top: env(safe-area-inset-top);
	}

	.sf-safe-bottom {
		padding-bottom: env(safe-area-inset-bottom);
	}
}