/*
 * Starter theme for It Depends — theming API version 1.
 * Guide: /theming.html
 *
 * This whole file is loaded into a cascade layer above the app's base styles, so plain selectors win
 * without extra specificity. Uncomment and change what you need.
 *
 * Prefix any @keyframes with your theme's name: a room theme and a personal theme load together, and
 * keyframe names are global, so two themes defining the same name clash.
 */

:root {
	/* light, dark, or "light dark" to follow the system */
	color-scheme: light;

	--itd-font: system-ui, sans-serif;
	--itd-bg: #f6f5f2;
	--itd-surface: #ffffff;
	--itd-fg: #1d1f23;
	--itd-muted: #666a73;
	--itd-border: #dcdad4;
	--itd-accent: #3255d6;
	--itd-accent-fg: #ffffff;
	--itd-warning: #a35a00;
	--itd-card-bg: var(--itd-surface);
	--itd-card-fg: var(--itd-fg);
	--itd-card-border: var(--itd-border);
	--itd-card-selected-bg: var(--itd-accent);
	--itd-card-selected-fg: var(--itd-accent-fg);
	--itd-radius: 0.5rem;
	--itd-gap: 1rem;

	/* Tints, states and effects; leave them out and the defaults (blue, green, amber) show. */
	--itd-accent-soft: #e8edfc;
	--itd-success: #1d7a46;
	--itd-success-soft: #e3f4ea;
	--itd-caution: #7a4b00;
	--itd-caution-soft: #fbf0d9;
	--itd-danger: #b42318;
	--itd-danger-fg: #ffffff;
	--itd-outline: #8e9097;
	--itd-focus: var(--itd-accent);
	--itd-shadow: 0 1px 2px rgb(20 20 30 / 0.06);
	--itd-shadow-raised: 0 6px 20px rgb(20 20 30 / 0.1);

	/* Panels may be translucent; dialogs and sheets keep the opaque --itd-surface. */
	--itd-panel: var(--itd-surface);
	--itd-backdrop: rgb(10 10 20 / 0.45);
	/* 999px rounds chips and badges fully; 0 squares them. */
	--itd-radius-pill: 999px;
}

/* Panels */
/* section { box-shadow: 0 2px 6px rgb(0 0 0 / 0.1); } */

/* Voting cards; the picked one has data-selected="true" */
/* .itd-card { }
.itd-card[data-selected='true'] { } */

/* The active item in the list */
/* .itd-item[data-active='true'] { } */

/* Item statuses: open, estimated, incomplete, rejected */
/* .itd-item[data-status='rejected'] .itd-item-text { } */

/* The round by phase: none, discussing, voting, revealed */
/* .itd-round[data-phase='revealed'] { } */

/* The countdown: data-count is 3, 2, 1 and changes every second */
/* .itd-countdown[data-count='1'] .itd-countdown-number { } */

/* Revealed votes get --i (index) and --rank (0 lowest to 1 highest), cards a data-value */
/* .itd-vote-value { background: color-mix(in oklab, red calc(var(--rank, 0) * 100%), green); } */

/* Statistics: data-stat is min, max, mean or median */
/* .itd-stat[data-stat='mean'] dd { } */

/* Participants: data-vote is none, voted or pending */
/* .itd-participant[data-vote='pending'] .itd-participant-name { } */