@use "function" as *;

// ============================================
// CSS 변수명 선언 (테마 적용용)
// ============================================

// Surface / Normal
$container: --container;
$invert-container: --invert-container;

$none: --none;

// Primary
$primary: --primary;

// Secondary
$secondary: --secondary;

// warning
$warning: --warning;

// Text & Icon / OnNormal
$text-high: --text-high;
$text-low: --text-low;
$text-mid: --text-mid;
$text-yellow: --text-yellow;

// Border / Normal
$border-low: --border-low;
$border-mid: --border-mid;
$border-high: --border-high;

// Modal
$modal-bg: --modal-bg;
$modal-surface: --modal-surface;
$modal-note: --modal-note;

// Button
$btn-bg: --btn-bg;
$btn-line: --btn-line;
$disabled: --disabled;


// Table
$table-th-bg: --table-th-bg;
$table-tb-bg: --table-tb-bg;
$table-th-border: --table-th-border;
$table-tb-border: --table-tb-border;

// ============================================
// CSS 변수명 선언 (고정 Color)
// ============================================

$text-black: #111;
$text-white: #fff;


// ============================================
// 테마별 컬러셋 (Dark 테마 - 기본)
// ============================================
$theme-dark: (
  // Surface / Normal
  $container: to-rgba(#ffffff, 0.09),
  $invert-container: to-rgba(#ffffff, 0.04),
  $none: to-rgba(#ffffff, 0),
  // Primary
  $primary: to-rgb(#40fab6),
  // Secondary
  $secondary: to-rgb(#f23e5d),
  // warning
  $warning: to-rgb(#F2833E),
  // Text & Icon / OnNormal
  $text-high: to-rgb(#ffffff),
  $text-mid: to-rgb(#111111),
  $text-low: to-rgb(#b0b6be),
  $text-yellow: to-rgb(#ffe032),
  // Border / Normal
  $border-low: to-rgba(#ffffff, 0.15),
  $border-mid: to-rgba(#ffffff, 0.12),
  $border-high: to-rgb(#ffffff),
  // Modal
  $modal-bg: to-rgb(#1f1f1f),
  $modal-surface: to-rgba(#ffffff, 0.08),
  $modal-note: to-rgba(#ffffff, 0.04),
  // Button
  $btn-bg: to-rgba(#ffffff, 0.16),
  $btn-line: to-rgb(#e5e5e5),
  $disabled: to-rgba(#f1f1f5, 1),
  // Table
  $table-th-bg: to-rgba(#898989, 0.2),
  $table-tb-bg: to-rgba(#898989, 0.04),
  $table-th-border: to-rgba(#ffffff, 0.09),
  $table-tb-border: to-rgba(#ffffff, 0.12)
);

// ============================================
// 테마별 컬러셋 (Light 테마)
// ============================================
$theme-light: (
  // Surface / Normal
  $container: to-rgba(#ffffff, 0.56),
  $invert-container: to-rgba(#ffffff, 0.24),
  $none: to-rgba(#ffffff, 0),
  // Primary
  $primary: to-rgb(#00c980),
  // Secondary
  $secondary: to-rgb(#ff4868),
  // warning
  $warning: to-rgb(#F2833E),
  // Text & Icon / OnNormal
  $text-high: to-rgb(#111111),
  $text-mid: to-rgb(#ffffff),
  $text-low: to-rgb(#666666),
  $text-yellow: to-rgb(#e03b3b),
  // Border / Normal
  $border-low: to-rgba(#ffffff, 1),
  $border-mid: to-rgba(#ffffff, 1),
  $border-high: to-rgb(#ffffff),
  // Modal
  $modal-bg: to-rgb(#ffffff),
  $modal-surface: to-rgba(#eceff3, 1),
  $modal-note: to-rgba(#F7F8FA, 1),
  // Button
  $btn-bg: to-rgba(#eceff3, 1),
  $btn-line: to-rgb(#666666),
  $disabled: to-rgba(#E1E1E8, 1),
  // Table
  $table-th-bg: to-rgba(#eceff3, 1),
  $table-tb-bg: to-rgba(#fbfdff, 1),
  $table-th-border: to-rgba(#e5e5e5, 1),
  $table-tb-border: to-rgba(#e5e5e5, 1)
);

// breakpoints
$breakpoints: (
  "xs": 375px,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
  "xxl": 1400px,
);