Styles

// ==========================================
// Tile 扩展令牌
// ==========================================

:where(:root) {
	--tile-success: #22c55e;
	--tile-success-foreground: #fafafa;
	--tile-warning: #f59e0b;
	--tile-warning-foreground: #fafafa;
	--tile-info: #3b82f6;
	--tile-info-foreground: #fafafa;
	--tile-overlay: rgb(0 0 0 / 0.5);
	--tile-shadow-color: 0 0 0;
	--tile-radius-full: 9999px;
	--tile-text-xs: 0.75rem;
	--tile-text-sm: 0.875rem;
	--tile-text-base: 1rem;
	--tile-text-lg: 1.125rem;
	--tile-text-xl: 1.25rem;
	--tile-text-2xl: 1.5rem;
	--tile-text-3xl: 1.875rem;
	--tile-font-light: 300;
	--tile-font-normal: 400;
	--tile-font-medium: 500;
	--tile-font-semibold: 600;
	--tile-font-bold: 700;
	--tile-leading-none: 1;
	--tile-leading-tight: 1.25;
	--tile-leading-normal: 1.5;
	--tile-leading-relaxed: 1.625;
}

// 向后兼容入口：默认主题与全局重置一起加载。
@use 'theme';
@use 'reset';

@use 'tokens';

// ==========================================
// 可选默认主题
// ==========================================

:root,
.light,
[data-theme='light'] {
	color-scheme: light;
	--background: #ffffff;
	--foreground: #18181b;
	--card: #ffffff;
	--card-foreground: #18181b;
	--popover: #ffffff;
	--popover-foreground: #18181b;
	--primary: #18181b;
	--primary-foreground: #fafafa;
	--secondary: #f4f4f5;
	--secondary-foreground: #18181b;
	--muted: #f4f4f5;
	--muted-foreground: #71717a;
	--accent: #f4f4f5;
	--accent-foreground: #18181b;
	--destructive: #ef4444;
	--destructive-foreground: #fafafa;
	--border: #e4e4e7;
	--input: #e4e4e7;
	--ring: #18181b;
	--chart-1: #e76e50;
	--chart-2: #2a9d90;
	--chart-3: #274754;
	--chart-4: #e8c468;
	--chart-5: #f4a462;
	--sidebar: var(--card);
	--sidebar-foreground: var(--card-foreground);
	--sidebar-primary: var(--primary);
	--sidebar-primary-foreground: var(--primary-foreground);
	--sidebar-accent: var(--accent);
	--sidebar-accent-foreground: var(--accent-foreground);
	--sidebar-border: var(--border);
	--sidebar-ring: var(--ring);
	--radius: 0.5rem;
}

.dark,
[data-theme='dark'] {
	color-scheme: dark;
	--background: #09090b;
	--foreground: #fafafa;
	--card: #09090b;
	--card-foreground: #fafafa;
	--popover: #09090b;
	--popover-foreground: #fafafa;
	--primary: #fafafa;
	--primary-foreground: #18181b;
	--secondary: #27272a;
	--secondary-foreground: #fafafa;
	--muted: #27272a;
	--muted-foreground: #a1a1aa;
	--accent: #27272a;
	--accent-foreground: #fafafa;
	--destructive: #7f1d1d;
	--destructive-foreground: #fafafa;
	--border: #27272a;
	--input: #27272a;
	--ring: #d4d4d8;
	--chart-1: #2662d9;
	--chart-2: #2eb88a;
	--chart-3: #e88c30;
	--chart-4: #af57db;
	--chart-5: #e23670;
}

@use './variables/colors' as *;

// ==========================================
// 全局重置与基础样式
// ==========================================

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

html {
	font-family: $font-sans;
	font-size: 16px;
	line-height: $leading-normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	background-color: $background;
	color: $foreground;
	font-family: $font-sans;
	font-size: $text-base;
	line-height: $leading-normal;
}

a {
	color: $primary;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

img {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: $font-semibold;
	line-height: $leading-tight;
}

h1 {
	font-size: $text-3xl;
}
h2 {
	font-size: $text-2xl;
}
h3 {
	font-size: $text-xl;
}
h4 {
	font-size: $text-lg;
}
h5 {
	font-size: $text-base;
}
h6 {
	font-size: $text-sm;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: $spacing-4;
	padding-right: $spacing-4;

	@media (min-width: 640px) {
		max-width: 640px;
	}

	@media (min-width: 768px) {
		max-width: 768px;
	}

	@media (min-width: 1024px) {
		max-width: 1024px;
	}

	@media (min-width: 1280px) {
		max-width: 1280px;
	}
}

// ==========================================
// 运行时设计令牌的 Sass 兼容别名
// ==========================================

// shadcn 语义颜色
$primary: var(--primary);
$primary-foreground: var(--primary-foreground);
$secondary: var(--secondary);
$secondary-foreground: var(--secondary-foreground);
$accent: var(--accent);
$accent-foreground: var(--accent-foreground);
$destructive: var(--destructive);
$destructive-foreground: var(--destructive-foreground);
$background: var(--background);
$foreground: var(--foreground);
$card: var(--card);
$card-foreground: var(--card-foreground);
$muted: var(--muted);
$muted-foreground: var(--muted-foreground);
$popover: var(--popover);
$popover-foreground: var(--popover-foreground);
$border: var(--border);
$input: var(--input);
$ring: var(--ring);

// Tile 扩展颜色
$success: var(--tile-success);
$success-foreground: var(--tile-success-foreground);
$warning: var(--tile-warning);
$warning-foreground: var(--tile-warning-foreground);
$info: var(--tile-info);
$info-foreground: var(--tile-info-foreground);
$primary-hover: var(--tile-primary-hover, color-mix(in srgb, var(--primary) 90%, var(--background)));
$primary-active: var(--tile-primary-active, color-mix(in srgb, var(--primary) 80%, var(--background)));
$secondary-hover: var(--tile-secondary-hover, color-mix(in srgb, var(--secondary) 90%, var(--background)));
$destructive-hover: var(--tile-destructive-hover, color-mix(in srgb, var(--destructive) 90%, var(--background)));
$destructive-muted-foreground: var(--tile-destructive-muted-foreground, color-mix(in srgb, var(--destructive) 85%, var(--card-foreground)));
$field-disabled: var(--tile-field-disabled, var(--muted));
$field-subtle: var(--tile-field-subtle, color-mix(in srgb, var(--input) 50%, var(--background)));
$field-hover: var(--tile-field-hover, color-mix(in srgb, var(--background) 98%, var(--foreground)));
$overlay: var(--tile-overlay);

// 阴影
$shadow-sm: var(--tile-shadow-sm, 0 1px 2px 0 rgb(var(--tile-shadow-color) / 0.05));
$shadow: var(--tile-shadow, 0 1px 3px 0 rgb(var(--tile-shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--tile-shadow-color) / 0.1));
$shadow-md: var(--tile-shadow-md, 0 4px 6px -1px rgb(var(--tile-shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--tile-shadow-color) / 0.1));
$shadow-lg: var(--tile-shadow-lg, 0 10px 15px -3px rgb(var(--tile-shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--tile-shadow-color) / 0.1));

// 圆角
$radius-xs: var(--tile-radius-xs, max(0px, calc(var(--radius) - 0.375rem)));
$radius-sm: var(--tile-radius-sm, max(0px, calc(var(--radius) - 0.25rem)));
$radius: var(--radius);
$radius-md: var(--tile-radius-md, calc(var(--radius) + 0.25rem));
$radius-lg: var(--tile-radius-lg, calc(var(--radius) + 0.5rem));
$radius-full: var(--tile-radius-full);

// 字体
$font-sans: var(--tile-font-sans, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif));
$font-mono: var(--tile-font-mono, var(--font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace));

// 字号
$text-xs: var(--tile-text-xs);
$text-sm: var(--tile-text-sm);
$text-base: var(--tile-text-base);
$text-lg: var(--tile-text-lg);
$text-xl: var(--tile-text-xl);
$text-2xl: var(--tile-text-2xl);
$text-3xl: var(--tile-text-3xl);

// 字重
$font-light: var(--tile-font-light);
$font-normal: var(--tile-font-normal);
$font-medium: var(--tile-font-medium);
$font-semibold: var(--tile-font-semibold);
$font-bold: var(--tile-font-bold);

// 行高
$leading-none: var(--tile-leading-none);
$leading-tight: var(--tile-leading-tight);
$leading-normal: var(--tile-leading-normal);
$leading-relaxed: var(--tile-leading-relaxed);

// 间距
$spacing-1: 0.25rem;
$spacing-1_5: 0.375rem;
$spacing-2: 0.5rem;
$spacing-2_5: 0.625rem;
$spacing-3: 0.75rem;
$spacing-4: 1rem;
$spacing-5: 1.25rem;
$spacing-6: 1.5rem;
$spacing-8: 2rem;
$spacing-10: 2.5rem;
$spacing-12: 3rem;

// 过渡
$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
$transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
$transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

// 层级
$z-dropdown: 1000;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;

// ==========================================
// 基础混入工具
// ==========================================

// 清除浮动
@mixin clearfix {
	&::after {
		content: '';
		display: table;
		clear: both;
	}
}

// 隐藏文本
@mixin hide-text {
	overflow: hidden;
	text-indent: -9999px;
}

// 绝对定位居中
@mixin center-absolutely {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

// Flex 居中
@mixin flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

// Flex 垂直居中
@mixin flex-center-vertical {
	display: flex;
	align-items: center;
}

// Flex 水平居中
@mixin flex-center-horizontal {
	display: flex;
	justify-content: center;
}

// 省略号
@mixin ellipsis($lines: 1) {
	@if $lines == 1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} @else {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
	}
}

// 响应式断点
$breakpoints: (
	'sm': 640px,
	'md': 768px,
	'lg': 1024px,
	'xl': 1280px,
	'2xl': 1536px,
);

@mixin respond-to($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		@media (min-width: map-get($breakpoints, $breakpoint)) {
			@content;
		}
	} @else {
		@media (min-width: $breakpoint) {
			@content;
		}
	}
}

// 主题变量生成
@mixin theme-variables($theme-prefix: 'tile') {
	--#{$theme-prefix}-primary: var(--primary);
	--#{$theme-prefix}-primary-foreground: var(--primary-foreground);
	--#{$theme-prefix}-secondary: var(--secondary);
	--#{$theme-prefix}-secondary-foreground: var(--secondary-foreground);
	--#{$theme-prefix}-accent: var(--accent);
	--#{$theme-prefix}-accent-foreground: var(--accent-foreground);
	--#{$theme-prefix}-destructive: var(--destructive);
	--#{$theme-prefix}-destructive-foreground: var(--destructive-foreground);
	--#{$theme-prefix}-background: var(--background);
	--#{$theme-prefix}-foreground: var(--foreground);
	--#{$theme-prefix}-border: var(--border);
	--#{$theme-prefix}-input: var(--input);
	--#{$theme-prefix}-ring: var(--ring);
}

// 焦点状态
@mixin focus-ring {
	&:focus-visible {
		outline: none;
		box-shadow:
			0 0 0 2px $background,
			0 0 0 4px $ring;
	}
}

// 禁用状态
@mixin disabled {
	&:disabled,
	&.disabled,
	&[disabled] {
		pointer-events: none;
		opacity: 0.5;
		cursor: not-allowed;
	}
}