/* ============================================
 * 矾山茶语 · 数字大屏设计令牌
 * Design Tokens CSS Variables
 * 项目：矾山镇油茶基地数字化项目
 * ============================================ */

:root {
  /* ===== Color: Primary（生态茶绿 + 科技深蓝）===== */
  --color-primary: #3DD68C;
  --color-primary-light: #5DE3A8;
  --color-primary-dark: #2BB477;
  --color-primary-glow: rgba(61, 214, 140, 0.15);
  --color-accent: #1B6FE0;
  --color-accent-light: #3B8BF5;
  --color-accent-dark: #1455A8;

  /* ===== Color: Background ===== */
  --color-bg-base: #0A0F1A;
  --color-bg-surface: #0F1828;
  --color-bg-elevated: #152233;
  --color-bg-hover: #1B2B40;
  --color-bg-active: #243650;
  --color-bg-overlay: rgba(10, 15, 26, 0.85);
  --color-visual-panel-bg: rgba(13, 21, 32, 0.85);
  --color-visual-label-bg: rgba(15, 24, 40, 0.9);

  /* ===== Color: Text ===== */
  --color-text-primary: #E8EDF5;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary: #6B7B95;
  --color-text-inverse: #0A0F1A;
  --color-text-brand: #3DD68C;

  /* ===== Color: Border ===== */
  --color-border: #1E2D42;
  --color-border-light: #162236;
  --color-border-strong: #2A4060;
  --color-border-brand: rgba(61, 214, 140, 0.3);

  /* ===== Color: Semantic ===== */
  --color-success: #3DD68C;
  --color-warning: #FF9F43;
  --color-danger: #FF5A5A;
  --color-info: #4DA3FF;
  --color-success-bg: rgba(61, 214, 140, 0.12);
  --color-warning-bg: rgba(255, 159, 67, 0.12);
  --color-danger-bg: rgba(255, 90, 90, 0.12);
  --color-info-bg: rgba(77, 163, 255, 0.12);

  /* ===== Color: Alpha Variants ===== */
  --color-bg-surface-60: rgba(15, 24, 40, 0.6);
  --color-bg-surface-80: rgba(15, 24, 40, 0.8);
  --color-overlay-white-2: rgba(255, 255, 255, 0.02);
  --color-overlay-white-5: rgba(255, 255, 255, 0.05);
  --color-overlay-white-8: rgba(255, 255, 255, 0.08);
  --color-overlay-white-10: rgba(255, 255, 255, 0.1);
  --color-danger-border: rgba(255, 90, 90, 0.4);
  --color-danger-glow-15: rgba(255, 90, 90, 0.15);
  --color-primary-glow-10: rgba(61, 214, 140, 0.1);
  --color-accent-glow-15: rgba(27, 111, 224, 0.15);

  /* ===== Color: Chart ===== */
  --chart-c1: #3DD68C;
  --chart-c2: #1B6FE0;
  --chart-c3: #FF9F43;
  --chart-c4: #4DA3FF;
  --chart-c5: #A78BFA;
  --chart-c6: #F472B6;
  --chart-grid: rgba(94, 115, 140, 0.1);
  --chart-axis: #6B7B95;

  /* ===== Color: Map ===== */
  --map-bg: #0D1520;
  --map-land: #152535;
  --map-land-border: rgba(61, 214, 140, 0.2);
  --map-water: #0F2438;
  --map-road: #1E3550;
  --map-point-normal: #3DD68C;
  --map-point-warning: #FF9F43;
  --map-point-danger: #FF5A5A;
  --map-point-glow: rgba(61, 214, 140, 0.4);

  /* ===== Typography ===== */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans CN", "Helvetica Neue", Arial, sans-serif;
  --font-numeric: "DIN Alternate", "DIN Condensed", "Bebas Neue", "Oswald", "Arial Narrow", var(--font-sans);
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", "SF Mono", monospace;
  --text-display: 56px;
  --text-kpi: 38px;
  --text-h1: 30px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* ===== Spacing ===== */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-btn: 6px;
  --radius-card: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ===== Shadow & Glow ===== */
  --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.5);
  --glow-primary-sm: 0 0 8px rgba(61, 214, 140, 0.2);
  --glow-primary-md: 0 0 16px rgba(61, 214, 140, 0.25);
  --glow-danger-sm: 0 0 8px rgba(255, 90, 90, 0.2);
  --glow-danger-md: 0 0 16px rgba(255, 90, 90, 0.3);
  --glow-accent-sm: 0 0 8px rgba(27, 111, 224, 0.2);

  /* ===== Z-index ===== */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-alert: 350;
  --z-toast: 400;
  --z-overlay: 500;

  /* ===== Transition ===== */
  --transition-instant: 100ms;
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== Grid ===== */
  --grid-columns: 24;
  --grid-gutter: 16px;
  --grid-margin: 24px;
}
/* ===== Light Theme =====
 * 仅替换视觉令牌，不改变任何布局尺寸与内容结构。
 */
:root { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;

  --color-primary: #14885A;
  --color-primary-light: #2EAD78;
  --color-primary-dark: #0D6B45;
  --color-primary-glow: rgba(20, 136, 90, 0.16);
  --color-accent: #1769C2;
  --color-accent-light: #237EDB;
  --color-accent-dark: #0E4B91;

  --color-bg-base: #F4F7F5;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #E7F0EB;
  --color-bg-active: #DCE9E1;
  --color-bg-overlay: rgba(244, 247, 245, 0.9);
  --color-visual-panel-bg: rgba(255, 255, 255, 0.94);
  --color-visual-label-bg: rgba(255, 255, 255, 0.96);

  --color-text-primary: #18241E;
  --color-text-secondary: #53665B;
  --color-text-tertiary: #788980;
  --color-text-inverse: #FFFFFF;
  --color-text-brand: #117A50;

  --color-border: #D4E0D8;
  --color-border-light: #E5ECE8;
  --color-border-strong: #B5C8BC;
  --color-border-brand: rgba(20, 136, 90, 0.32);

  --color-success: #14885A;
  --color-warning: #B7630C;
  --color-danger: #D43D40;
  --color-info: #1769C2;
  --color-success-bg: rgba(20, 136, 90, 0.11);
  --color-warning-bg: rgba(183, 99, 12, 0.11);
  --color-danger-bg: rgba(212, 61, 64, 0.1);
  --color-info-bg: rgba(23, 105, 194, 0.1);

  --color-bg-surface-60: rgba(255, 255, 255, 0.82);
  --color-bg-surface-80: rgba(255, 255, 255, 0.94);
  --color-overlay-white-2: rgba(18, 48, 31, 0.025);
  --color-overlay-white-5: rgba(18, 48, 31, 0.05);
  --color-overlay-white-8: rgba(18, 48, 31, 0.08);
  --color-overlay-white-10: rgba(18, 48, 31, 0.1);
  --color-danger-border: rgba(212, 61, 64, 0.32);
  --color-danger-glow-15: rgba(212, 61, 64, 0.12);
  --color-primary-glow-10: rgba(20, 136, 90, 0.1);
  --color-accent-glow-15: rgba(23, 105, 194, 0.12);

  --chart-c1: #14885A;
  --chart-c2: #1769C2;
  --chart-c3: #B7630C;
  --chart-c4: #237EDB;
  --chart-c5: #7657C7;
  --chart-c6: #C84C8C;
  --chart-grid: rgba(65, 88, 75, 0.14);
  --chart-axis: #687A70;

  --map-bg: #EDF4F0;
  --map-land: #DCEAE2;
  --map-land-border: rgba(20, 136, 90, 0.3);
  --map-water: #DCECF3;
  --map-road: #B8CEC1;
  --map-point-normal: #14885A;
  --map-point-warning: #B7630C;
  --map-point-danger: #D43D40;
  --map-point-glow: rgba(20, 136, 90, 0.3);

  --shadow-raised: 0 2px 8px rgba(33, 55, 42, 0.1);
  --shadow-floating: 0 8px 32px rgba(33, 55, 42, 0.14);
  --shadow-overlay: 0 16px 48px rgba(33, 55, 42, 0.18);
  --glow-primary-sm: 0 0 8px rgba(20, 136, 90, 0.14);
  --glow-primary-md: 0 0 16px rgba(20, 136, 90, 0.18);
  --glow-danger-sm: 0 0 8px rgba(212, 61, 64, 0.14);
  --glow-danger-md: 0 0 16px rgba(212, 61, 64, 0.18);
  --glow-accent-sm: 0 0 8px rgba(23, 105, 194, 0.14);
}