/* ==========================================================================
   Google for Education Design Tokens (Refero Design Reference)
   CSS Variables & Tokens Definition
   ========================================================================== */

@theme {
  /* Colors */
  --color-white: #ffffff;
  --color-snow: #ffffff;
  --color-canvas-white: #f8f9fa;
  --color-charcoal-ink: #202124;
  --color-graphite: #3c4043;
  --color-slate: #5f6368;
  --color-mist: #dadce0;
  --color-cloud-shadow: #c4c6c7;
  --color-google-blue: #1a73e8;
  --color-google-blue-deep: #1967d2;
  --color-classroom-green: #188038;
  --color-google-red: #d93025;
  --color-google-yellow: #f9ab00;

  /* 상태별 시맨틱 배경 & 테두리 틴트 토큰 */
  --color-success-bg: #e6f4ea;
  --color-success-border: #ceead6;
  --color-danger-bg: #fce8e6;
  --color-danger-border: #fad2cf;
  --color-warning-bg: #fef7e0;
  --color-warning-border: #feefc3;
  --color-info-bg: #e8f0fe;
  --color-info-border: #d2e3fc;
  --color-hover-tint: #f1f3f4;

  /* 상태별 시맨틱 텍스트 토큰 (WCAG 명도 대비 준수) */
  --color-success-text: #137333;
  --color-danger-text: #c5221f;
  --color-warning-text: #b06000;
  --color-info-text: #1a73e8;

  /* 신규 상태별 텍스트 및 테두리 토큰 */
  --color-success-dark: #137333;
  --color-success-light: #ceead6;
  --color-status-late: #b06000;
  --color-status-early-leave: #c5221f;
  --color-status-night: #1a73e8;
  --color-status-normal: #137333;
  --color-status-absent: #d93025;
  --color-status-holiday: #e37400;

  /* 교대 스케줄 야간 토큰 */
  --color-shift-night-bg: #f3e8fd;
  --color-shift-night-border: #d7aefb;
  --color-shift-night-text: #7627bb;

  /* 셀 배경 틴트 토큰 */
  --cell-changed-bg: rgba(232, 240, 254, 0.5);
  --cell-pending-bg: rgba(254, 247, 224, 0.5);
  --cell-missing-bg: rgba(252, 232, 230, 0.5);


  /* 레거시 별칭 토큰 호환 */
  --color-cloud-gray: #f1f3f4;
  --color-sea-green: #188038;
  --color-coral: #d93025;
  --color-marigold: #f9ab00;

  /* 4대보험 시맨틱 컬러 */
  --color-insurance-pension: #e37400;
  --color-insurance-pension-bg: #fef7e0;
  --color-insurance-health: #188038;
  --color-insurance-health-bg: #e6f4ea;
  --color-insurance-employment: #1a73e8;
  --color-insurance-employment-bg: #e8f0fe;
  --color-insurance-accident: #d93025;
  --color-insurance-accident-bg: #fce8e6;

  /* 엑셀 & CSV 컬러 */
  --color-excel: #107c41;
  --color-excel-deep: #0b5f31;
  --color-excel-bg: #e7f5ec;
  --color-csv: #1a73e8;
  --color-csv-bg: #e8f0fe;

  /* 보조 텍스트·캘린더·다크바 시맨틱 컬러 */
  --color-muted: #9aa0a6;
  --color-insurance-pension-border: #f1c798;
  --color-teal-text: #00796b;
  --color-dark-surface-text: #e8eaed;
  --color-dark-surface-link: #8ab4f8;
  --color-calendar-today-bg: #f0f7ff;
  --color-calendar-holiday-bg: #fff8f8;
  --color-calendar-holiday-border: #fbcfe8;
  --color-calendar-today-holiday-bg: #f4f6ff;

  /* Typography */
  --font-primary: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-display: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-text: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */

  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.432px;
  --text-body-xs: 12px;
  --leading-body-xs: 1.5;
  --tracking-body-xs: 0.432px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.238px;
  --text-body: 16px;
  --leading-body: 1.56;
  --tracking-body: 0.272px;
  --text-subheading: 18px;
  --leading-subheading: 1.67;
  --tracking-subheading: 0.108px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.67;
  --tracking-body-lg: 0.108px;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.29;
  --tracking-heading-sm: -0.132px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: -0.168px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.288px;
  --text-display: 80px;
  --leading-display: 1.09;
  --tracking-display: -0.8px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-120: 120px;
  --spacing-216: 216px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-full: 200px;
  --radius-full-2: 300px;

  /* Shadows (UI_RULES.md: Card/Panel은 none 원칙) */
  --shadow-sm: none;
}

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-snow: #ffffff;
  --color-canvas-white: #f8f9fa;
  --color-charcoal-ink: #202124;
  --color-graphite: #3c4043;
  --color-slate: #5f6368;
  --color-mist: #dadce0;
  --color-cloud-shadow: #c4c6c7;
  --color-google-blue: #1a73e8;
  --color-google-blue-deep: #1967d2;
  --color-classroom-green: #188038;
  --color-google-red: #d93025;
  --color-google-yellow: #f9ab00;

  /* 상태별 시맨틱 배경 & 테두리 틴트 토큰 */
  --color-success-bg: #e6f4ea;
  --color-success-border: #ceead6;
  --color-danger-bg: #fce8e6;
  --color-danger-border: #fad2cf;
  --color-warning-bg: #fef7e0;
  --color-warning-border: #feefc3;
  --color-info-bg: #e8f0fe;
  --color-info-border: #d2e3fc;
  --color-hover-tint: #f1f3f4;

  /* 상태별 시맨틱 텍스트 토큰 (WCAG 명도 대비 준수) */
  --color-success-text: #137333;
  --color-danger-text: #c5221f;
  --color-warning-text: #b06000;
  --color-info-text: #1a73e8;

  /* 신규 상태별 텍스트 및 테두리 토큰 */
  --color-success-dark: #137333;
  --color-success-light: #ceead6;
  --color-status-late: #b06000;
  --color-status-early-leave: #c5221f;
  --color-status-night: #1a73e8;
  --color-status-normal: #137333;
  --color-status-absent: #d93025;
  --color-status-holiday: #e37400;

  /* 교대 스케줄 야간 토큰 */
  --color-shift-night-bg: #f3e8fd;
  --color-shift-night-border: #d7aefb;
  --color-shift-night-text: #7627bb;

  /* 셀 배경 틴트 토큰 */
  --cell-changed-bg: rgba(232, 240, 254, 0.5);
  --cell-pending-bg: rgba(254, 247, 224, 0.5);
  --cell-missing-bg: rgba(252, 232, 230, 0.5);

  /* 레거시 별칭 토큰 호환 */
  --color-cloud-gray: #f1f3f4;
  --color-sea-green: #188038;
  --color-coral: #d93025;
  --color-marigold: #f9ab00;

  /* 4대보험 시맨틱 컬러 */
  --color-insurance-pension: #e37400;
  --color-insurance-pension-bg: #fef7e0;
  --color-insurance-health: #188038;
  --color-insurance-health-bg: #e6f4ea;
  --color-insurance-employment: #1a73e8;
  --color-insurance-employment-bg: #e8f0fe;
  --color-insurance-accident: #d93025;
  --color-insurance-accident-bg: #fce8e6;

  /* 엑셀 & CSV 컬러 */
  --color-excel: #107c41;
  --color-excel-deep: #0b5f31;
  --color-excel-bg: #e7f5ec;
  --color-csv: #1a73e8;
  --color-csv-bg: #e8f0fe;

  /* 보조 텍스트·캘린더·다크바 시맨틱 컬러 */
  --color-muted: #9aa0a6;
  --color-insurance-pension-border: #f1c798;
  --color-teal-text: #00796b;
  --color-dark-surface-text: #e8eaed;
  --color-dark-surface-link: #8ab4f8;
  --color-calendar-today-bg: #f0f7ff;
  --color-calendar-holiday-bg: #fff8f8;
  --color-calendar-holiday-border: #fbcfe8;
  --color-calendar-today-holiday-bg: #f4f6ff;

  /* Typography — Font Families */
  --font-primary: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-display: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-text: 'Noto Sans KR', 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: 0.432px;
  --text-body-xs: 12px;
  --leading-body-xs: 1.5;
  --tracking-body-xs: 0.432px;

  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.238px;

  --text-body: 16px;
  --leading-body: 1.56;
  --tracking-body: 0.272px;

  --text-subheading: 18px;
  --leading-subheading: 1.67;
  --tracking-subheading: 0.108px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.67;
  --tracking-body-lg: 0.108px;

  --text-heading-sm: 22px;
  --leading-heading-sm: 1.29;
  --tracking-heading-sm: -0.132px;

  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: -0.168px;

  --text-heading-lg: 48px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.288px;

  --text-display: 80px;
  --leading-display: 1.09;
  --tracking-display: -0.8px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-120: 120px;
  --spacing-216: 216px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px; /* Reference: 64-80px */
  --card-padding: 16px; /* Spacing scale 16 통일 */
  --element-gap: 16px; /* Spacing scale 16 통일 */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;
  --radius-full: 200px;
  --radius-full-2: 300px;

  /* Shadows (UI_RULES.md: Card/Panel은 none 원칙) */
  --shadow-sm: none;

  /* Named Radii & Control Defaults (Border Radius lg 통일 기준) */
  --radius-cards: 8px; /* Standard card radius: lg (8px) */
  --radius-chips: 9999px;
  --radius-links: 8px; /* Standard link/interactive radius: lg (8px) */
  --radius-inputs: 8px; /* Standard form control radius: lg (8px) */
  --control-height: 36px; /* Standard control height: 36px (inputs, selects, pickers, buttons) */
  --control-width-default: 140px; /* Standard control default width: 140px */
  --radius-buttons: 200px; /* pill */
  --radius-navitems: 8px;

  /* Surfaces */
  --surface-canvas: #f8f9fa;
  --surface-card-surface: #ffffff;
  --surface-feature-panel-tint: #e8f0fe;
  --surface-scrim: #20212480;

  /* Table Component Standards (모든 테이블 전면 중앙 정렬, 단일 폰트 및 일체형 타이틀 바 규약) */
  --table-font-size: var(--text-body-sm); /* 14px */
  --table-header-font-weight: 600;
  --table-cell-font-weight: 400;
  --table-text-align: center;
  --table-header-bar-height: 48px;
  --table-header-bar-padding: var(--spacing-12) var(--spacing-16);
  --table-header-bar-bg: var(--surface-canvas);

  /* Modal Component Standards (모달 3대 표준 규격: 소형 400px / 중형 600px / 대형 900px) */
  --modal-width-sm: 400px;
  --modal-width-md: 600px;
  --modal-width-lg: 900px;
}