:root {
	/* Brand palette sourced from existing Two-Dos UI colors. */
	--td-brand-primary: var(--accent, #6951e3);
	--td-brand-secondary: var(--notice, #3dacd0);
	--td-brand-primary-strong: #5642c2;
	--td-brand-primary-soft: rgba(105, 81, 227, 0.12);

	/* Neutral scale. */
	--td-neutral-0: #ffffff;
	--td-neutral-25: #fbfcfe;
	--td-neutral-50: #f8fafc;
	--td-neutral-100: #f1f5f9;
	--td-neutral-200: #e2e8f0;
	--td-neutral-300: #cbd5e1;
	--td-neutral-400: #94a3b8;
	--td-neutral-500: #64748b;
	--td-neutral-600: #475569;
	--td-neutral-700: #334155;
	--td-neutral-800: #1e293b;
	--td-neutral-900: #0f172a;

	/* Semantic states, aligned with the current style approach. */
	--td-success-bg: #dcfce7;
	--td-success-fg: #166534;
	--td-warn-bg: #ffedd5;
	--td-warn-fg: #9a3412;
	--td-danger-bg: #fee2e2;
	--td-danger-fg: #b91c1c;

	/* Typography scale. */
	--td-font-size-xs: 12px;
	--td-font-size-sm: 13px;
	--td-font-size-md: 14px;
	--td-font-size-lg: 16px;
	--td-font-size-xl: 20px;
	--td-font-size-2xl: 28px;

	/* 8px spacing system. */
	--td-space-1: 8px;
	--td-space-2: 16px;
	--td-space-3: 24px;
	--td-space-4: 32px;
	--td-space-5: 40px;
	--td-space-6: 48px;

	/* Shape and elevation. */
	--td-radius-sm: 8px;
	--td-radius-md: 12px;
	--td-radius-lg: 16px;
	--td-radius-pill: 999px;
	--td-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
	--td-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.1);
	--td-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.18);

	/* Accessibility focus treatment. */
	--td-focus-ring-color: rgba(105, 81, 227, 0.42);
	--td-focus-ring: 0 0 0 3px var(--td-focus-ring-color);
}

.twodos-app {
	/* Bridge token aliases into legacy variable names without changing behavior. */
	--radius-sm: var(--radius-sm, var(--td-radius-sm));
	--radius: var(--radius, var(--td-radius-md));
	--shadow-1: var(--shadow-1, var(--td-shadow-sm));
	--shadow-2: var(--shadow-2, var(--td-shadow-md));
	--shadow-3: var(--shadow-3, var(--td-shadow-lg));
	--success-bg: var(--td-success-bg);
	--success-text: var(--td-success-fg);
	--warn-bg: var(--td-warn-bg);
	--warn-text: var(--td-warn-fg);
	--danger-bg: var(--td-danger-bg);
	--danger-text: var(--td-danger-fg);
}

.twodos-app :where(button, [role='button'], input, select, textarea):focus-visible {
	outline: 2px solid var(--td-focus-ring-color);
	outline-offset: 2px;
}