snp-connection-monitoring/frontend/src/index.css

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* === Brand Scales (고정, 테마 불변) === */

  /* Primary (Slate Blue) 50~950 */
  --color-primary-50: #F5F7F9;
  --color-primary-100: #E5EBF2;
  --color-primary-200: #D2DAE5;
  --color-primary-300: #B7C5D7;
  --color-primary-400: #8AA5C7;
  --color-primary-500: #6D94C5;
  --color-primary-600: #507FB9;
  --color-primary-700: #3B669C;
  --color-primary-800: #2D507B;
  --color-primary-900: #1B2C41;
  --color-primary-950: #0E1A2B;

  /* Secondary (Powder Blue) 50~950 */
  --color-secondary-50: #F5F7F9;
  --color-secondary-100: #E6EDF5;
  --color-secondary-200: #D1DAE5;
  --color-secondary-300: #B7C8D7;
  --color-secondary-400: #89AAC8;
  --color-secondary-500: #CBDCEB;
  --color-secondary-600: #6B9AC8;
  --color-secondary-700: #4E88BB;
  --color-secondary-800: #396E9D;
  --color-secondary-900: #1B2F41;
  --color-secondary-950: #0E1A2B;

  /* Accent (Warm Sand) 50~950 */
  --color-accent-50: #F9F8F6;
  --color-accent-100: #F2EDE4;
  --color-accent-200: #E4E0D7;
  --color-accent-300: #D5CDB9;
  --color-accent-400: #C4B48C;
  --color-accent-500: #E8DFCA;
  --color-accent-600: #B59854;
  --color-accent-700: #9A7E3E;
  --color-accent-800: #786230;
  --color-accent-900: #3F351D;
  --color-accent-950: #2B2312;

  /* Chart Palette (고정) */
  --color-chart-1: #507FB9;
  --color-chart-2: #B59854;
  --color-chart-3: #4E88BB;
  --color-chart-4: #9A7E3E;
  --color-chart-5: #3B669C;
  --color-chart-6: #C4B48C;

  /* Typography */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;

  /* === 테마 전환 변수 (Light 기본값) === */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #0284C7;

  --color-bg-base: #F5EFE6;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-border: #D5D2CC;
  --color-border-strong: #9198A1;
  --color-text-primary: #1E2329;
  --color-text-secondary: #5C6570;
  --color-text-tertiary: #9198A1;

  --color-primary: #507FB9;
  --color-primary-hover: #3B669C;
  --color-primary-active: #2D507B;
  --color-primary-subtle: #F5F7F9;
  --color-primary-text: #2D507B;
  --color-secondary: #CBDCEB;
  --color-secondary-hover: #89AAC8;
  --color-secondary-active: #4E88BB;
  --color-secondary-subtle: #F5F7F9;
  --color-secondary-text: #396E9D;
  --color-accent: #E8DFCA;
  --color-accent-hover: #C4B48C;
  --color-accent-active: #B59854;
  --color-accent-subtle: #F9F8F6;
  --color-accent-text: #786230;
}

/* === Dark Theme (.dark 클래스 기반) === */
.dark {
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FCA5A5;
  --color-info: #38BDF8;

  --color-bg-base: #131416;
  --color-bg-surface: #1E2023;
  --color-bg-elevated: #282A2E;
  --color-border: #3A3C41;
  --color-border-strong: #5C6570;
  --color-text-primary: #F4F5F5;
  --color-text-secondary: #9198A1;
  --color-text-tertiary: #5C6570;

  --color-primary: #B7C5D7;
  --color-primary-hover: #D2DAE5;
  --color-primary-active: #8AA5C7;
  --color-primary-subtle: #1B2C41;
  --color-primary-text: #D2DAE5;
  --color-secondary: #B7C8D7;
  --color-secondary-hover: #D1DAE5;
  --color-secondary-active: #89AAC8;
  --color-secondary-subtle: #1B2F41;
  --color-secondary-text: #D1DAE5;
  --color-accent: #D5CDB9;
  --color-accent-hover: #E4E0D7;
  --color-accent-active: #C4B48C;
  --color-accent-subtle: #3F351D;
  --color-accent-text: #E4E0D7;

  --color-chart-1: #6D94C5;
  --color-chart-2: #C4B48C;
  --color-chart-3: #6B9AC8;
  --color-chart-4: #B59854;
  --color-chart-5: #8AA5C7;
  --color-chart-6: #D5CDB9;
}

/* === Dark Theme (OS 기본 설정 기반) === */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #FCA5A5;
    --color-info: #38BDF8;

    --color-bg-base: #131416;
    --color-bg-surface: #1E2023;
    --color-bg-elevated: #282A2E;
    --color-border: #3A3C41;
    --color-border-strong: #5C6570;
    --color-text-primary: #F4F5F5;
    --color-text-secondary: #9198A1;
    --color-text-tertiary: #5C6570;

    --color-primary: #B7C5D7;
    --color-primary-hover: #D2DAE5;
    --color-primary-active: #8AA5C7;
    --color-primary-subtle: #1B2C41;
    --color-primary-text: #D2DAE5;
    --color-secondary: #B7C8D7;
    --color-secondary-hover: #D1DAE5;
    --color-secondary-active: #89AAC8;
    --color-secondary-subtle: #1B2F41;
    --color-secondary-text: #D1DAE5;
    --color-accent: #D5CDB9;
    --color-accent-hover: #E4E0D7;
    --color-accent-active: #C4B48C;
    --color-accent-subtle: #3F351D;
    --color-accent-text: #E4E0D7;

    --color-chart-1: #6D94C5;
    --color-chart-2: #C4B48C;
    --color-chart-3: #6B9AC8;
    --color-chart-4: #B59854;
    --color-chart-5: #8AA5C7;
    --color-chart-6: #D5CDB9;
  }
}

/* Dark mode date input calendar icon */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}