/* ========================================
 * SafeNow 테마 베이스 토큰
 * 계층: themes (테마 시스템 기초)
 * 모든 테마의 기본값 정의 (~55종)
 * 로드: head.jsp 전역 (가장 먼저 로드)
 * ======================================== */

:root {
  /* ── Brand (8종) ── */
  --sfn-primary: #696cff;
  --sfn-primary-hover: #5f61e6;
  --sfn-primary-active: #5456cc;
  --sfn-primary-subtle: #e7e7ff;
  --sfn-secondary: #8592a3;
  --sfn-accent: #03c3ec;
  --sfn-logo-filter: none;
  --sfn-brand-hue: 268;

  /* ── Semantic (8종) ── */
  --sfn-success: #71dd37;
  --sfn-success-subtle: #e8fadb;
  --sfn-warning: #ffab00;
  --sfn-warning-subtle: #fff3cd;
  --sfn-danger: #ff3e1d;
  --sfn-danger-subtle: #ffe0db;
  --sfn-info: #03c3ec;
  --sfn-info-subtle: #d7f5fc;

  /* ── Surface (10종) ── */
  --sfn-bg-body: #f5f5f9;
  --sfn-bg-card: #ffffff;
  --sfn-bg-subtle: #f8f9fc;
  --sfn-bg-light: #f5f5f5;
  --sfn-bg-highlight: #e8f0fe;
  --sfn-bg-banner: #EBEFF3;
  --sfn-bg-input: #ffffff;
  --sfn-bg-hover: #f0f0f5;
  --sfn-bg-overlay: rgb(0 0 0 / 0.5);
  --sfn-shadow: rgb(161 172 184 / 0.45);

  /* ── Text (6종) ── */
  --sfn-text-dark: #252525;
  --sfn-text: #333333;
  --sfn-text-muted: #697a8d;
  --sfn-text-light: #a1acb8;
  --sfn-text-on-primary: #ffffff;
  --sfn-text-link: #696cff;

  /* ── Border (5종) ── */
  --sfn-border: #dddddd;
  --sfn-border-light: #e9ecef;
  --sfn-border-strong: #BAC6D2;
  --sfn-border-input: #d9dee3;
  --sfn-border-table: #d9dee3;

  /* ── Blue Scale (9종) ── */
  --sfn-blue-900: #1D5996;
  --sfn-blue-700: #4e7ba8;
  --sfn-blue-600: #5F8DBC;
  --sfn-blue-500: #697a8d;
  --sfn-blue-400: #566a7f;
  --sfn-blue-300: #BAC6D2;
  --sfn-blue-200: #d9dee3;
  --sfn-blue-100: #EBEFF3;
  --sfn-blue-50: #e8f0fe;

  /* ── Status Colors (10종) ── */
  --sfn-status-pending: #697a8d;
  --sfn-status-pending-subtle: rgba(105, 122, 141, 0.12);
  --sfn-status-progress: #FFAB0A;
  --sfn-status-progress-subtle: rgba(255, 171, 10, 0.12);
  --sfn-status-completed: #55C71E;
  --sfn-status-completed-subtle: rgba(85, 199, 30, 0.12);
  --sfn-status-overdue: #FF4D4D;
  --sfn-status-overdue-subtle: rgba(255, 77, 77, 0.12);
  --sfn-status-rejected: #7C5DC7;
  --sfn-status-rejected-subtle: rgba(124, 93, 199, 0.12);

  /* ── Neutral Scale (9종) ── */
  --sfn-neutral-900: #1a1a1a;
  --sfn-neutral-800: #252525;
  --sfn-neutral-700: #333333;
  --sfn-neutral-600: #555555;
  --sfn-neutral-500: #6c757d;
  --sfn-neutral-400: #999999;
  --sfn-neutral-300: #cccccc;
  --sfn-neutral-200: #e9ecef;
  --sfn-neutral-100: #f5f5f5;
}

/* ── OKLCH Progressive Enhancement ── */
@supports (color: oklch(0% 0 0)) {
  :root {
    /* Brand OKLCH */
    --sfn-primary: oklch(55% 0.27 268);
    --sfn-primary-hover: oklch(50% 0.24 268);
    --sfn-primary-active: oklch(45% 0.22 268);
    --sfn-primary-subtle: oklch(94% 0.05 268);
    --sfn-secondary: oklch(64% 0.04 250);
    --sfn-accent: oklch(76% 0.14 215);

    /* Semantic OKLCH */
    --sfn-success: oklch(81% 0.22 140);
    --sfn-success-subtle: oklch(96% 0.06 140);
    --sfn-warning: oklch(79% 0.18 75);
    --sfn-warning-subtle: oklch(97% 0.04 85);
    --sfn-danger: oklch(60% 0.24 30);
    --sfn-danger-subtle: oklch(94% 0.05 25);
    --sfn-info: oklch(76% 0.14 215);
    --sfn-info-subtle: oklch(95% 0.04 215);

    /* Surface OKLCH */
    --sfn-bg-body: oklch(97% 0.003 280);
    --sfn-bg-card: oklch(100% 0 0);
    --sfn-bg-subtle: oklch(98% 0.003 260);
    --sfn-bg-light: oklch(97% 0 0);
    --sfn-bg-highlight: oklch(95% 0.03 260);
    --sfn-bg-banner: oklch(95% 0.008 250);
    --sfn-bg-input: oklch(100% 0 0);
    --sfn-bg-hover: oklch(96% 0.005 270);
    --sfn-bg-overlay: oklch(0% 0 0 / 0.5);
    --sfn-shadow: oklch(75% 0.02 250 / 0.45);

    /* Text OKLCH */
    --sfn-text-dark: oklch(22% 0 0);
    --sfn-text: oklch(30% 0 0);
    --sfn-text-muted: oklch(55% 0.03 245);
    --sfn-text-light: oklch(72% 0.02 250);
    --sfn-text-on-primary: oklch(100% 0 0);
    --sfn-text-link: oklch(55% 0.27 268);

    /* Border OKLCH */
    --sfn-border: oklch(89% 0 0);
    --sfn-border-light: oklch(93% 0.005 250);
    --sfn-border-strong: oklch(82% 0.02 245);
    --sfn-border-input: oklch(90% 0.01 245);
    --sfn-border-table: oklch(90% 0.01 245);

    /* Blue Scale OKLCH */
    --sfn-blue-900: oklch(43% 0.11 250);
    --sfn-blue-700: oklch(56% 0.08 245);
    --sfn-blue-600: oklch(62% 0.08 245);
    --sfn-blue-500: oklch(55% 0.03 245);
    --sfn-blue-400: oklch(50% 0.04 245);
    --sfn-blue-300: oklch(82% 0.02 245);
    --sfn-blue-200: oklch(90% 0.01 245);
    --sfn-blue-100: oklch(95% 0.008 250);
    --sfn-blue-50: oklch(95% 0.03 260);

    /* Status Colors OKLCH */
    --sfn-status-pending: oklch(55% 0.03 245);
    --sfn-status-pending-subtle: oklch(55% 0.03 245 / 0.12);
    --sfn-status-progress: oklch(79% 0.18 75);
    --sfn-status-progress-subtle: oklch(79% 0.18 75 / 0.12);
    --sfn-status-completed: oklch(73% 0.22 140);
    --sfn-status-completed-subtle: oklch(73% 0.22 140 / 0.12);
    --sfn-status-overdue: oklch(58% 0.24 25);
    --sfn-status-overdue-subtle: oklch(58% 0.24 25 / 0.12);
    --sfn-status-rejected: oklch(50% 0.18 300);
    --sfn-status-rejected-subtle: oklch(50% 0.18 300 / 0.12);

    /* Neutral Scale OKLCH */
    --sfn-neutral-900: oklch(18% 0 0);
    --sfn-neutral-800: oklch(22% 0 0);
    --sfn-neutral-700: oklch(30% 0 0);
    --sfn-neutral-600: oklch(42% 0 0);
    --sfn-neutral-500: oklch(52% 0 0);
    --sfn-neutral-400: oklch(67% 0 0);
    --sfn-neutral-300: oklch(83% 0 0);
    --sfn-neutral-200: oklch(93% 0.005 250);
    --sfn-neutral-100: oklch(97% 0 0);
  }
}

/* ── Sneat/Bootstrap 변수 오버라이드 ──
 * _base.css는 core.css 이후에 로드되므로 cascade로 Sneat 변수를 덮어씀.
 * 테마 파일이 --sfn-* 를 바꾸면 --bs-* 도 자동 반영.
 *
 * 파생 색상(text-emphasis, border-subtle)은 color-mix()로 자동 계산.
 * -rgb 변수는 정적 값이므로 각 테마 파일에서 오버라이드.
 * ── */
:root {
  /* ── Primary 계열 ── */
  --bs-primary: var(--sfn-primary);
  --bs-primary-bg-subtle: var(--sfn-primary-subtle);
  --bs-primary-text-emphasis: #2a2b66;
  --bs-primary-text-emphasis: color-mix(in srgb, var(--sfn-primary) 40%, black);
  --bs-primary-border-subtle: #c3c4ff;
  --bs-primary-border-subtle: color-mix(in srgb, var(--sfn-primary) 40%, white);

  /* ── Success 계열 ── */
  --bs-success: var(--sfn-success);
  --bs-success-bg-subtle: var(--sfn-success-subtle);
  --bs-success-text-emphasis: #2d5816;
  --bs-success-text-emphasis: color-mix(in srgb, var(--sfn-success) 40%, black);
  --bs-success-border-subtle: #c3eea1;
  --bs-success-border-subtle: color-mix(in srgb, var(--sfn-success) 40%, white);

  /* ── Danger 계열 ── */
  --bs-danger: var(--sfn-danger);
  --bs-danger-bg-subtle: var(--sfn-danger-subtle);
  --bs-danger-text-emphasis: #66190c;
  --bs-danger-text-emphasis: color-mix(in srgb, var(--sfn-danger) 40%, black);
  --bs-danger-border-subtle: #ff9e8e;
  --bs-danger-border-subtle: color-mix(in srgb, var(--sfn-danger) 40%, white);

  /* ── Warning 계열 ── */
  --bs-warning: var(--sfn-warning);
  --bs-warning-bg-subtle: var(--sfn-warning-subtle);
  --bs-warning-text-emphasis: #664400;
  --bs-warning-text-emphasis: color-mix(in srgb, var(--sfn-warning) 40%, black);
  --bs-warning-border-subtle: #ffc966;
  --bs-warning-border-subtle: color-mix(in srgb, var(--sfn-warning) 40%, white);

  /* ── Info 계열 ── */
  --bs-info: var(--sfn-info);
  --bs-info-bg-subtle: var(--sfn-info-subtle);
  --bs-info-text-emphasis: #014e5e;
  --bs-info-text-emphasis: color-mix(in srgb, var(--sfn-info) 40%, black);
  --bs-info-border-subtle: #68dbf4;
  --bs-info-border-subtle: color-mix(in srgb, var(--sfn-info) 40%, white);

  /* ── Secondary 계열 ── */
  --bs-secondary: var(--sfn-secondary);
  --bs-secondary-text-emphasis: #353a41;
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--sfn-secondary) 40%, black);
  --bs-secondary-border-subtle: #c8cdd2;
  --bs-secondary-border-subtle: color-mix(in srgb, var(--sfn-secondary) 40%, white);
  --bs-secondary-color: var(--sfn-text-muted);
  --bs-secondary-bg: var(--sfn-neutral-200);

  /* ── Light / Dark ── */
  --bs-light: var(--sfn-neutral-200);
  --bs-dark: var(--sfn-neutral-800);
  --bs-light-text-emphasis: var(--sfn-text-muted);
  --bs-dark-text-emphasis: var(--sfn-text-muted);
  --bs-light-bg-subtle: var(--sfn-neutral-100);
  --bs-dark-bg-subtle: var(--sfn-neutral-300);
  --bs-light-border-subtle: var(--sfn-neutral-200);
  --bs-dark-border-subtle: var(--sfn-neutral-300);

  /* ── Link ── */
  --bs-link-color: var(--sfn-text-link);
  --bs-link-hover-color: var(--sfn-primary-hover);

  /* ── Surface / Body ── */
  --bs-body-bg: var(--sfn-bg-body);
  --bs-body-color: var(--sfn-text);
  --bs-heading-color: var(--sfn-text-dark);
  --bs-emphasis-color: var(--sfn-text-dark);
  --bs-tertiary-bg: var(--sfn-neutral-100);

  /* ── Border ── */
  --bs-border-color: var(--sfn-border);
  --bs-border-color-translucent: rgb(0 0 0 / 0.175);

  /* ── Form validation ── */
  --bs-form-valid-color: var(--sfn-success);
  --bs-form-valid-border-color: var(--sfn-success);
  --bs-form-invalid-color: var(--sfn-danger);
  --bs-form-invalid-border-color: var(--sfn-danger);

  /* ── -rgb 기본값 (Sneat 기본 팔레트) — 테마에서 오버라이드 ── */
  --bs-primary-rgb: 105, 108, 255;
  --bs-secondary-rgb: 133, 146, 163;
  --bs-success-rgb: 113, 221, 55;
  --bs-danger-rgb: 255, 62, 29;
  --bs-warning-rgb: 255, 171, 0;
  --bs-info-rgb: 3, 195, 236;
  --bs-light-rgb: 233, 236, 239;
  --bs-dark-rgb: 37, 37, 37;
  --bs-body-color-rgb: 51, 51, 51;
  --bs-body-bg-rgb: 245, 245, 249;
  --bs-emphasis-color-rgb: 37, 37, 37;
  --bs-secondary-color-rgb: 105, 122, 141;
  --bs-link-color-rgb: 105, 108, 255;
  --bs-link-hover-color-rgb: 95, 97, 230;
}