/* Palette: amber accent on warm neutrals. Dark is the default here, but the app
   is designed light-first — `--color-primary` is the fill colour, and
   `--color-primary-on-surface` is the accessible variant for accent TEXT (bright
   amber on white is nowhere near 4.5:1, so never use the fill colour for type). */
:root {
	--bg:           #14120f;
	--bg-grad-top:  #2a2115;
	--surface:      #1b1814;
	--surface-2:    #232019;
	--surface-3:    #2f2a22;
	--text:         #f6f3ee;
	--text-dim:     #a9a196;
	--text-faint:   #746d63;
	--color-primary:       #f2a63a;
	--color-primary-on-surface:     #f7be68;
	--color-primary-grad:  linear-gradient(135deg, #f2a63a 0%, #f7be68 100%);
	--border:       #322c24;
	--danger:       #ef4444;
	/* --pending = "waiting, nothing happening yet" (booking accepted but not
	   started, request awaiting a provider). Deliberately neutral: the accent is
	   amber now, so a warm pending pill would read as branding rather than state.
	   Slate also lets the ACTIVE stages — travel blue, arrived violet, working
	   green — carry the eye. --warning is for genuine caution only. */
	--pending:      #94a3b8;
	--warning:      #f97316;
	--nav-bg:       rgba(20, 18, 15, 0.92);
	--player-h:     76px;
	--nav-h:        62px;

	/* Map WebAwesome tokens to the dark palette */
	--wa-color-brand-fill-loud: var(--color-primary);
	--wa-color-surface-default: var(--surface-2);
	color-scheme: dark;
}

/* Light theme tokens. Applied when the user picks Light, or when the OS prefers
   light and they haven't forced Dark (the media query below). Keep in sync with
   THEME_COLOR in js/theme.js. */
:root[data-theme="light"] {
	--bg:           #faf7f2;
	--bg-grad-top:  #fdebd2;
	--surface:      #ffffff;
	--surface-2:    #ffffff;
	--surface-3:    #f1ebe1;
	--text:         #1b1a17;
	--text-dim:     #6a635a;
	--text-faint:   #9c948a;
	--color-primary:       #e08a17;
	--color-primary-on-surface:     #a2600a;
	--color-primary-grad:  linear-gradient(135deg, #f0a32e 0%, #e08a17 100%);
	--border:       #e9e2d6;
	--pending:      #64748b;
	--warning:      #c2410c;
	--nav-bg:       rgba(250, 247, 242, 0.92);
	--wa-color-surface-default: var(--surface-2);
	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--bg:           #faf7f2;
		--bg-grad-top:  #fdebd2;
		--surface:      #ffffff;
		--surface-2:    #ffffff;
		--surface-3:    #f1ebe1;
		--text:         #1b1a17;
		--text-dim:     #6a635a;
		--text-faint:   #9c948a;
		--color-primary:       #e08a17;
		--color-primary-on-surface:     #a2600a;
		--color-primary-grad:  linear-gradient(135deg, #f0a32e 0%, #e08a17 100%);
		--border:       #e9e2d6;
		--pending:      #64748b;
		--warning:      #c2410c;
		--nav-bg:       rgba(250, 247, 242, 0.92);
		--wa-color-surface-default: var(--surface-2);
		color-scheme: light;
	}
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: none;
}

body {
	background:
		radial-gradient(1200px 480px at 50% -10%, var(--bg-grad-top), transparent 70%),
		var(--bg);
	min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; }

/* No custom ::-webkit-scrollbar styling: defining it opts Blink/WebKit out of
   native overlay (auto-hiding) scrollbars and forces always-visible classic
   ones. `color-scheme: dark` (see :root) already gives us dark native bars that
   auto-hide on mobile and look right on desktop. */

.muted { color: var(--text-dim); }
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}