/* CSS Variables for Telr UI Components */
:root {
  /* Colors - Primary */
  --color-primary: #0d6448;
  --color-primary-dark: #073325;
  --color-primary-darker: #073c2b;
  --color-primary-light: #00a886;
  --color-primary-jumbotron: #006f52;
  
  /* Colors - Secondary */
  --color-secondary: #e96f35;
  --color-secondary-dark: #730f0f;
  
  /* Colors - Success/Positive */
  --color-success: #49d871;
  --color-success-light: #dbf5ed;
  --color-success-dark: #40582d;
  --color-success-checkbox: #5cb85c;
  --color-success-checkbox-border: #4cae4c;
  
  /* Colors - Error/Danger */
  --color-error: #e01818;
  --color-error-light: #ffd0d0;
  --color-error-light-alt: #FFFCFC;
  --color-error-dark: #c32f2f;
  --color-error-darker: #a02626;
  
  /* Colors - Warning */
  --color-warning: #e0a800;
  
  /* Colors - Neutral/Grays */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-10: #f8f8fc;
  --color-gray-20: #f8f8f8;
  --color-gray-30: #f4f4f4;
  --color-gray-40: #f2f2f2;
  --color-gray-45: #eee;
  --color-gray-50: #e0e0e0;
  --color-gray-55: #ebccd1;
  --color-gray-60: #d9dbdb;
  --color-gray-70: #cccccc;
  --color-gray-80: #c0c0c0;
  --color-gray-90: #b6b7b8;
  --color-gray-100: #929499;
  --color-gray-105: #9B9B9B;
  --color-gray-110: #888888;
  --color-gray-120: #808080;
  --color-gray-125: rgb(152, 152, 152);
  --color-gray-130: #727272;
  --color-gray-140: #636363;
  --color-gray-150: #606060;
  --color-gray-160: #414141;
  --color-gray-170: #3d4043;
  --color-gray-180: #2c2c2c;
  --color-gray-190: #191a1a;
  --color-gray-333: #333;
  --color-gray-200: #968D8D;
  --color-gray-210: #845151;
  --color-gray-220: #6f6f6f;
  --color-gray-230: #636c6c;
  --color-gray-240: #ababb3;
  --color-gray-250: #c3c5cc;
  --color-gray-260: #e1e1e1;
  --color-gray-270: #efefef;
  --color-gray-280: #f7f7f7;
  --color-gray-290: #e2e3e4;
  --color-gray-300: #f3f4f4;
  --color-gray-310: #dddddd;
  --color-gray-320: #1C1919;
  --color-gray-330: #666;
  
  /* Colors - Text */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-120);
  --color-text-muted: var(--color-gray-110);
  --color-text-light: var(--color-white);
  --color-text-link: var(--color-primary-light);
  --color-text-link-hover: var(--color-black);
  --color-text-heading: var(--color-primary);
  --color-text-heading-secondary: var(--color-secondary);
  
  /* Colors - Background */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-40);
  --color-bg-tertiary: var(--color-gray-30);
  --color-bg-input: var(--color-gray-10);
  --color-bg-input-readonly: var(--color-gray-60);
  --color-bg-input-error: var(--color-error-light);
  --color-bg-success: var(--color-success);
  --color-bg-error: var(--color-error);
  --color-bg-warning: var(--color-warning);
  --color-bg-dark: var(--color-gray-190);
  --color-bg-footer: var(--color-gray-190);
  --color-bg-header: var(--color-primary);
  
  /* Colors - Border */
  --color-border-primary: var(--color-gray-100);
  --color-border-secondary: var(--color-gray-250);
  --color-border-light: var(--color-gray-310);
  --color-border-input: var(--color-gray-100);
  --color-border-input-readonly: var(--color-gray-90);
  --color-border-error: var(--color-error);
  --color-border-success: var(--color-primary);
  --color-border-dark: var(--color-gray-180);
  
  /* Colors - Chart */
  --color-chart-border: var(--color-gray-170);
  --color-chart-hover: var(--color-gray-20);
  --color-chart-bar: #a5e6f8;
  
  /* Typography - Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 18px;
  --font-size-4xl: 20px;
  --font-size-5xl: 23px;
  --font-size-5xl-alt: 21px;
  --font-size-6xl: 36px;
  --font-size-7xl: 48px;
  
  /* Typography - Font Family */
  --font-family-base: "Helvetica Neue", Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
  
  /* Spacing */
  --spacing-xs: 1px;
  --spacing-sm: 2px;
  --spacing-md: 4px;
  --spacing-lg: 5px;
  --spacing-xl: 10px;
  --spacing-2xl: 15px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-5xl: 65px;
  
  /* Border Radius */
  --border-radius-none: 0px;
  --border-radius-sm: 1px;
  --border-radius-md: 4px;
  --border-radius-lg: 5px;
  
  /* Shadows */
  --shadow-sm: 0 1px 1px rgba(0,0,0,.075);
  --shadow-md: 0 2px 4px 0 rgba(73,216,113,0.47);
  --shadow-lg: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(224, 24, 24, .6);
  
  /* Opacity */
  --opacity-disabled: 0.65;
  
  /* Dimensions */
  --min-width-button: 75px;
  --min-width-button-large: 80px;
  --width-sidebar: 160px;
  --width-chart-col: 28px;
  --width-chart-col-large: 90px;
  --height-chart: 100px;
  --height-chart-labels: 12px;
  --height-header: 65px;
  
  /* Z-index */
  --z-index-chart-value: 200;
  --z-index-chart-image: 190;
}