/**
 * @fileoverview
 * CSS Custom Properties for GearTrain design system.
 * Ayu theme - Light and Mirage variants with native accent colors.
 *
 * @see https://github.com/ayu-theme/ayu-colors
 * @see https://ayutheme.com
 */

:root {
	/* ========================================
	 * AYU LIGHT VARIANT
	 * ======================================== */

	/* Palette colors */
	--ayu-light-red: #f07171;
	--ayu-light-pink: #f2a191;
	--ayu-light-orange: #fa8532;
	--ayu-light-peach: #e59645;
	--ayu-light-yellow: #eba400;
	--ayu-light-green: #86b300;
	--ayu-light-teal: #4cbf99;
	--ayu-light-indigo: #55b4d4;
	--ayu-light-blue: #22a4e6;
	--ayu-light-purple: #a37acc;
	--ayu-light-gray: #adaeb1;

	/* Surface colors */
	--ayu-light-surface-sunk: #ebeef0;
	--ayu-light-surface-base: #f8f9fa;
	--ayu-light-surface-lift: #fcfcfc;

	/* Editor/UI colors */
	--ayu-light-editor-fg: #5c6166;
	--ayu-light-ui-fg: #828e9f;
	--ayu-light-ui-line: #6b7d8f;

	/* Common colors */
	--ayu-light-accent: #f29718;
	--ayu-light-accent-on: #1f2430;
	--ayu-light-error: #e65050;

	/* VCS colors */
	--ayu-light-vcs-added: #6cbf43;
	--ayu-light-vcs-modified: #478acc;
	--ayu-light-vcs-removed: #ff7383;

	/* ========================================
	 * AYU MIRAGE VARIANT
	 * ======================================== */

	/* Palette colors */
	--ayu-mirage-red: #f28779;
	--ayu-mirage-pink: #f29e74;
	--ayu-mirage-orange: #ffa659;
	--ayu-mirage-peach: #d9be98;
	--ayu-mirage-yellow: #ffcd66;
	--ayu-mirage-green: #d5ff80;
	--ayu-mirage-teal: #95e6cb;
	--ayu-mirage-indigo: #5ccfe6;
	--ayu-mirage-blue: #73d0ff;
	--ayu-mirage-purple: #dfbfff;
	--ayu-mirage-gray: #6e7c8f;

	/* Surface colors */
	--ayu-mirage-surface-sunk: #181c26;
	--ayu-mirage-surface-base: #1f2430;
	--ayu-mirage-surface-lift: #242936;

	/* Editor/UI colors */
	--ayu-mirage-editor-fg: #cccac2;
	--ayu-mirage-ui-fg: #707a8c;
	--ayu-mirage-ui-line: #171b24;

	/* Common colors */
	--ayu-mirage-accent: #ffcc66;
	--ayu-mirage-accent-on: #1f2430;
	--ayu-mirage-error: #ff6666;

	/* VCS colors */
	--ayu-mirage-vcs-added: #87d96c;
	--ayu-mirage-vcs-modified: #80bfff;
	--ayu-mirage-vcs-removed: #f27983;

	/* ========================================
	 * LIGHT THEME (Ayu Light - default)
	 * ======================================== */

	/* Palette aliases */
	--ayu-red: var(--ayu-light-red);
	--ayu-pink: var(--ayu-light-pink);
	--ayu-orange: var(--ayu-light-orange);
	--ayu-peach: var(--ayu-light-peach);
	--ayu-yellow: var(--ayu-light-yellow);
	--ayu-green: var(--ayu-light-green);
	--ayu-teal: var(--ayu-light-teal);
	--ayu-indigo: var(--ayu-light-indigo);
	--ayu-blue: var(--ayu-light-blue);
	--ayu-purple: var(--ayu-light-purple);
	--ayu-gray: var(--ayu-light-gray);

	/* Semantic variables */
	--color-bg: var(--ayu-light-surface-lift);
	--color-surface: var(--ayu-light-surface-base);
	--color-surface-hover: var(--ayu-light-surface-sunk);
	--color-primary: var(--ayu-light-accent);
	--color-accent: var(--ayu-light-accent);
	--color-text: #4b5157;
	--color-text-muted: #5f6b7a;
	--color-border: var(--ayu-light-ui-line);
	--color-link: #07547d;
	--color-success: var(--ayu-light-vcs-added);
	--color-warning: var(--ayu-light-yellow);
	--color-error: #d13c3c;

	/* Text-safe accents for light backgrounds. The palette colors above
	 * remain fills and borders; these keep foreground text at AA or better. */
	--color-accent-ink: #ad4a00;
	--color-success-ink: #2b5a12;
	--color-warning-ink: #6b4700;
	--color-error-ink: #a52a2a;
	--color-info-ink: #07547d;
	--color-purple-ink: #5f3f86;

	/* Alert backgrounds */
	--color-alert-error-bg: color-mix(
		in srgb,
		var(--color-error) 12%,
		var(--color-bg)
	);
	--color-alert-success-bg: color-mix(
		in srgb,
		var(--color-success) 12%,
		var(--color-bg)
	);
	--color-alert-warning-bg: color-mix(
		in srgb,
		var(--color-warning) 14%,
		var(--color-bg)
	);
	--color-alert-info-bg: color-mix(
		in srgb,
		var(--color-link) 10%,
		var(--color-bg)
	);

	/* Header */
	--color-header: var(--ayu-light-surface-sunk);
	--color-header-text: #4b5157;
	--color-header-border: var(--color-accent);
	--color-header-nav-hover: #dce1e5;
	--color-header-nav-hover-text: #1f2430;

	/* Card variations */
	--color-card-blue: var(--ayu-light-surface-sunk);
	--color-card-accent: var(--ayu-light-surface-sunk);

	/* Interactive states */
	--color-primary-hover: var(--ayu-light-orange);
	--color-accent-hover: var(--ayu-light-orange);
	--color-error-hover: #b83232;

	/* Text on accent */
	--color-on-accent: var(--ayu-light-accent-on);
	--color-on-error: #ffffff;

	/* Storage usage breakdown segments */
	--color-storage-files: #146b4f;
	--color-storage-logs: #8a5a00;
	--color-storage-other: #6b7684;

	/* ========================================
	 * SPACING & TYPOGRAPHY
	 * ======================================== */

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 3rem;
	--space-10: 4rem;

	--font-family: system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;

	--header-height: 79px;
	--sidebar-width: 250px;
	--max-width: 1024px;
	--container-padding: var(--space-6);

	--border-width: 1px;
	--border-width-thick: 2px;
	--radius: 4px;

	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
}

/* ========================================
 * DARK THEME (Ayu Mirage)
 * ======================================== */
[data-theme="dark"] {
	/* Palette aliases */
	--ayu-red: var(--ayu-mirage-red);
	--ayu-pink: var(--ayu-mirage-pink);
	--ayu-orange: var(--ayu-mirage-orange);
	--ayu-peach: var(--ayu-mirage-peach);
	--ayu-yellow: var(--ayu-mirage-yellow);
	--ayu-green: var(--ayu-mirage-green);
	--ayu-teal: var(--ayu-mirage-teal);
	--ayu-indigo: var(--ayu-mirage-indigo);
	--ayu-blue: var(--ayu-mirage-blue);
	--ayu-purple: var(--ayu-mirage-purple);
	--ayu-gray: var(--ayu-mirage-gray);

	/* Semantic variables */
	--color-bg: var(--ayu-mirage-surface-lift);
	--color-surface: var(--ayu-mirage-surface-base);
	--color-surface-hover: var(--ayu-mirage-surface-sunk);
	--color-primary: var(--ayu-mirage-accent);
	--color-accent: var(--ayu-mirage-accent);
	--color-text: var(--ayu-mirage-editor-fg);
	--color-text-muted: var(--ayu-mirage-ui-fg);
	--color-border: var(--ayu-mirage-gray);
	--color-link: var(--ayu-mirage-blue);
	--color-success: var(--ayu-mirage-vcs-added);
	--color-warning: var(--ayu-mirage-yellow);
	--color-error: var(--ayu-mirage-error);

	/* Text-safe accent aliases; the Mirage palette already clears AA */
	--color-accent-ink: var(--ayu-mirage-accent);
	--color-success-ink: var(--ayu-mirage-vcs-added);
	--color-warning-ink: var(--ayu-mirage-yellow);
	--color-error-ink: var(--ayu-mirage-error);
	--color-info-ink: var(--ayu-mirage-blue);
	--color-purple-ink: var(--ayu-mirage-purple);

	/* Alert backgrounds */
	--color-alert-error-bg: color-mix(
		in srgb,
		var(--color-error) 8%,
		var(--color-bg)
	);
	--color-alert-success-bg: color-mix(
		in srgb,
		var(--color-success) 12%,
		var(--color-bg)
	);
	--color-alert-warning-bg: color-mix(
		in srgb,
		var(--color-warning) 14%,
		var(--color-bg)
	);
	--color-alert-info-bg: color-mix(
		in srgb,
		var(--color-link) 10%,
		var(--color-bg)
	);

	/* Header */
	--color-header: var(--ayu-mirage-surface-sunk);
	--color-header-text: var(--ayu-mirage-editor-fg);
	--color-header-border: var(--color-accent);
	--color-header-nav-hover: var(--ayu-mirage-surface-base);
	--color-header-nav-hover-text: var(--ayu-mirage-accent);

	/* Card variations */
	--color-card-blue: var(--ayu-mirage-surface-sunk);
	--color-card-accent: var(--ayu-mirage-surface-sunk);

	/* Interactive states */
	--color-primary-hover: var(--ayu-mirage-yellow);
	--color-accent-hover: var(--ayu-mirage-yellow);
	--color-error-hover: var(--ayu-mirage-red);

	/* Text on accent */
	--color-on-accent: var(--ayu-mirage-accent-on);
	--color-on-error: var(--ayu-mirage-accent-on);

	/* Storage usage breakdown segments */
	--color-storage-files: var(--ayu-mirage-teal);
	--color-storage-logs: var(--ayu-mirage-yellow);
	--color-storage-other: var(--ayu-mirage-gray);
}