:root {
  /* Brand Colors — Claude-style warm coral */
  --color-primary: #D97757;
  --color-primary-hover: #C4623D;
  --color-primary-light: #FEF3EC;
  --color-primary-muted: #F5D5C3;

  /* Attendance Status Colors */
  --color-present: #16A34A;
  --color-present-light: #DCFCE7;
  --color-absent: #DC2626;
  --color-absent-light: #FEE2E2;
  --color-late: #D97706;
  --color-late-light: #FEF3C7;
  --color-early: #7C3AED;
  --color-early-light: #EDE9FE;

  /* Neutral — warm-tinted grays */
  --color-bg: #FAF8F6;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F1EE;
  --color-text: #1C1917;
  --color-text-muted: #78716C;
  --color-border: #E7E0DA;
  --color-border-light: #F0EBE6;

  /* Premium */
  --color-premium: #D97706;
  --color-premium-light: #FFFBEB;

  /* Layout */
  --sidebar-width: 240px;
  --bottom-nav-height: 64px;
  --header-height: 56px;
  --content-max-width: 900px;

  /* Typography */
  --font-headline: 'Plus Jakarta Sans', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-family: 'Manrope', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius — rounder for warmth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows — warmer tint */
  --shadow-sm: 0 1px 4px rgba(120, 80, 50, 0.07), 0 1px 2px rgba(120, 80, 50, 0.04);
  --shadow-md: 0 4px 16px rgba(120, 80, 50, 0.10), 0 2px 4px rgba(120, 80, 50, 0.05);
  --shadow-lg: 0 12px 36px rgba(120, 80, 50, 0.12), 0 4px 8px rgba(120, 80, 50, 0.06);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index */
  --z-sidebar: 100;
  --z-bottom-nav: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;
}