/**
 * @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: var(--ayu-light-editor-fg);
	--color-text-muted: var(--ayu-light-ui-fg);
	--color-border: var(--ayu-light-ui-line);
	--color-link: var(--ayu-light-blue);
	--color-success: var(--ayu-light-vcs-added);
	--color-warning: var(--ayu-light-yellow);
	--color-error: var(--ayu-light-error);

	/* Header */
	--color-header: var(--ayu-light-surface-sunk);
	--color-header-text: var(--ayu-light-editor-fg);
	--color-header-border: var(--color-accent);

	/* 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);

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

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

	/* ========================================
	 * 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);

	/* Header */
	--color-header: var(--ayu-mirage-surface-sunk);
	--color-header-text: var(--ayu-mirage-editor-fg);
	--color-header-border: var(--color-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);

	/* Text on accent */
	--color-on-accent: 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);
}

/* ========================================
 * DOCS-ONLY LAYOUT TOKENS
 * The docs shell is slimmer than the app shell; these override the
 * app defaults above for documentation pages only.
 * ======================================== */
:root {
	--header-height: 50px;
	--sidebar-width: 250px;
	--toc-width: 200px;
	--max-width: 1024px;
	--container-padding: var(--space-6);
}