/**
* Andgreen Design System — Foundations / Tokens v1
* 單源品牌語言。禁止 #667eea→#764ba2 作品牌主色。
*
* 用法：
*
*
*/
:root {
/* ── Brand ── */
--ag-hue: 152;
--ag-primary: oklch(0.52 0.12 var(--ag-hue));
--ag-primary-hover: oklch(0.45 0.13 var(--ag-hue));
--ag-primary-active: oklch(0.40 0.12 var(--ag-hue));
--ag-primary-fg: oklch(0.99 0.01 var(--ag-hue));
--ag-primary-soft: oklch(0.95 0.03 var(--ag-hue));
--ag-accent: oklch(0.62 0.14 145);
/* ── Surfaces ── */
--ag-bg: oklch(0.98 0.005 150);
--ag-surface: oklch(1 0 0);
--ag-surface-2: oklch(0.96 0.008 150);
--ag-surface-3: oklch(0.93 0.01 150);
--ag-border: oklch(0.90 0.01 150);
--ag-border-strong: oklch(0.82 0.02 150);
/* ── Text ── */
--ag-fg: oklch(0.22 0.02 150);
--ag-fg-muted: oklch(0.42 0.02 150);
--ag-fg-subtle: oklch(0.55 0.015 150);
--ag-fg-invert: oklch(0.99 0.005 150);
/* ── State ── */
--ag-success: oklch(0.55 0.14 150);
--ag-success-soft: oklch(0.95 0.03 150);
--ag-warn: oklch(0.72 0.14 85);
--ag-warn-soft: oklch(0.96 0.04 85);
--ag-danger: oklch(0.55 0.18 25);
--ag-danger-soft: oklch(0.96 0.03 25);
--ag-info: oklch(0.55 0.1 230);
--ag-info-soft: oklch(0.95 0.03 230);
/* ── Elevation ── */
--ag-shadow-sm: 0 1px 2px oklch(0.2 0.02 150 / 0.06);
--ag-shadow: 0 4px 16px oklch(0.2 0.02 150 / 0.08);
--ag-shadow-lg: 0 12px 40px oklch(0.2 0.02 150 / 0.12);
/* ── Radius ── */
--ag-radius-sm: 6px;
--ag-radius: 10px;
--ag-radius-lg: 14px;
--ag-radius-xl: 20px;
--ag-radius-full: 9999px;
/* ── Space (4px base) ── */
--ag-space-1: 4px;
--ag-space-2: 8px;
--ag-space-3: 12px;
--ag-space-4: 16px;
--ag-space-5: 24px;
--ag-space-6: 32px;
--ag-space-7: 48px;
--ag-space-8: 64px;
/* ── Type ── */
--ag-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", ui-sans-serif,
system-ui, -apple-system, "Segoe UI", sans-serif;
--ag-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--ag-text-xs: 0.75rem;
--ag-text-sm: 0.875rem;
--ag-text-md: 1rem;
--ag-text-lg: 1.125rem;
--ag-text-xl: 1.25rem;
--ag-text-2xl: 1.5rem;
--ag-text-3xl: 1.875rem;
--ag-text-4xl: 2.25rem;
--ag-leading-tight: 1.25;
--ag-leading: 1.55;
--ag-leading-loose: 1.7;
--ag-weight-normal: 400;
--ag-weight-medium: 500;
--ag-weight-semibold: 600;
--ag-weight-bold: 700;
/* ── Motion ── */
--ag-duration-fast: 120ms;
--ag-duration: 180ms;
--ag-duration-slow: 280ms;
--ag-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
/* ── Layout ── */
--ag-container: 1120px;
--ag-container-narrow: 720px;
--ag-header-h: 64px;
--ag-z-header: 40;
--ag-z-overlay: 50;
--ag-z-modal: 60;
/* ── Gradients (green only) ── */
--ag-gradient: linear-gradient(
135deg,
oklch(0.48 0.12 152) 0%,
oklch(0.42 0.1 170) 100%
);
--ag-gradient-soft: linear-gradient(
135deg,
oklch(0.95 0.03 152) 0%,
oklch(0.93 0.03 170) 100%
);
/* ── Focus ── */
--ag-ring: 0 0 0 3px oklch(0.52 0.12 152 / 0.35);
/* Legacy aliases */
--primary-color: var(--ag-primary);
--primary-light: var(--ag-primary-soft);
}
/* Algae / dark product skin (opt-in on or body) */
.ag-skin-dark {
--ag-bg: oklch(0.14 0.02 150);
--ag-surface: oklch(0.18 0.025 150);
--ag-surface-2: oklch(0.22 0.03 150);
--ag-border: oklch(0.32 0.03 150);
--ag-border-strong: oklch(0.4 0.04 150);
--ag-fg: oklch(0.96 0.01 150);
--ag-fg-muted: oklch(0.78 0.02 150);
--ag-fg-subtle: oklch(0.65 0.02 150);
--ag-primary: oklch(0.72 0.18 145);
--ag-primary-hover: oklch(0.78 0.18 145);
--ag-primary-fg: oklch(0.12 0.02 150);
--ag-primary-soft: oklch(0.25 0.05 145);
--ag-gradient: linear-gradient(135deg, #000 0%, #0a2e0a 100%);
--ag-shadow: 0 8px 32px oklch(0 0 0 / 0.4);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Base reset helpers (opt-in via .ag-root) */
.ag-root {
font-family: var(--ag-font);
font-size: var(--ag-text-md);
line-height: var(--ag-leading);
color: var(--ag-fg);
background: var(--ag-bg);
-webkit-font-smoothing: antialiased;
}
.ag-root *,
.ag-root *::before,
.ag-root *::after {
box-sizing: border-box;
}
.ag-root :focus-visible {
outline: none;
box-shadow: var(--ag-ring);
}
.ag-container {
width: 100%;
max-width: var(--ag-container);
margin-inline: auto;
padding-inline: var(--ag-space-4);
}
.ag-container-narrow {
max-width: var(--ag-container-narrow);
}
.ag-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}