/* HexaClass design tokens
   Fonts: Plus Jakarta Sans (display) + Inter (UI), self-hosted variable WOFF2 (SIL OFL). */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --navy-950: #0B1328;
  --navy-900: #101A33;
  --navy-800: #14213D;
  --navy-700: #1E2E55;
  --indigo-50: #EEF0FF;
  --indigo-100: #E0E3FF;
  --indigo-200: #C7CBFE;
  --indigo-300: #A5ABFC;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --teal-50: #EDFCF9;
  --teal-100: #CCF6EE;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;

  /* Surfaces & text */
  --bg: #F7F8FC;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-sunken: #F1F3F8;
  --surface-hover: #F5F6FA;
  --text: #182230;
  --text-2: #475467;
  --text-3: #667085;
  --text-4: #8C95A6;
  --border: #E6EAF0;
  --border-strong: #D3D9E3;
  --scrim: rgba(11, 19, 40, 0.48);

  --primary: var(--indigo-600);
  --primary-hover: var(--indigo-700);
  --primary-soft: var(--indigo-50);
  --primary-soft-2: var(--indigo-100);
  --primary-text: var(--indigo-800);
  --on-primary: #FFFFFF;
  --accent: var(--teal-500);
  --accent-soft: var(--teal-50);
  --accent-text: var(--teal-700);

  /* Status */
  --success: #16A34A;
  --success-soft: #ECFDF3;
  --success-text: #067647;
  --success-border: #ABEFC6;
  --warning: #F59E0B;
  --warning-soft: #FFFAEB;
  --warning-text: #B54708;
  --warning-border: #FEDF89;
  --error: #DC2626;
  --error-soft: #FEF3F2;
  --error-text: #B42318;
  --error-border: #FECDCA;
  --info: #2563EB;
  --info-soft: #EFF6FF;
  --info-text: #1D4ED8;
  --info-border: #BFDBFE;
  --neutral-soft: #F2F4F7;
  --neutral-text: #344054;
  --neutral-border: #E4E7EC;

  /* Event categories */
  --cat-academic: #4F46E5;
  --cat-academic-soft: #EEF0FF;
  --cat-sports: #0D9488;
  --cat-sports-soft: #E6FAF6;
  --cat-cultural: #C026D3;
  --cat-cultural-soft: #FBEFFD;
  --cat-exam: #D97706;
  --cat-exam-soft: #FFF6E5;
  --cat-holiday: #E11D48;
  --cat-holiday-soft: #FFF0F3;
  --cat-meeting: #2563EB;
  --cat-meeting-soft: #EFF5FF;
  --cat-general: #475467;
  --cat-general-soft: #F2F4F7;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.55;

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

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 10px 24px -8px rgba(16, 24, 40, 0.14), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 24px 56px -16px rgba(16, 24, 40, 0.28), 0 4px 12px -4px rgba(16, 24, 40, 0.08);
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.28);

  /* Layout */
  --sidebar-w: 264px;
  --sidebar-rail: 76px;
  --topbar-h: 68px;
  --bottomnav-h: 64px;
  --content-max: 1560px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* Brand gradient for hero moments */
  --brand-gradient: linear-gradient(135deg, #14213D 0%, #23307A 52%, #4F46E5 100%);
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0B1120;
  --surface: #111A2E;
  --surface-2: #142039;
  --surface-sunken: #0E1627;
  --surface-hover: #182540;
  --text: #E7EAF3;
  --text-2: #B6BED0;
  --text-3: #8F99AF;
  --text-4: #8089A3;
  --border: #22304D;
  --border-strong: #2E3E60;
  --scrim: rgba(3, 7, 18, 0.66);

  --primary: #8580FA;
  --primary-hover: #9C98FF;
  --primary-soft: rgba(109, 103, 245, 0.16);
  --primary-soft-2: rgba(109, 103, 245, 0.26);
  --primary-text: #C3C1FF;
  --accent-soft: rgba(20, 184, 166, 0.14);
  --accent-text: #5EEAD4;

  --success-soft: rgba(22, 163, 74, 0.16);
  --success-text: #6EE7A0;
  --success-border: rgba(22, 163, 74, 0.4);
  --warning-soft: rgba(245, 158, 11, 0.14);
  --warning-text: #FCD34D;
  --warning-border: rgba(245, 158, 11, 0.4);
  --error-soft: rgba(220, 38, 38, 0.16);
  --error-text: #FCA5A5;
  --error-border: rgba(220, 38, 38, 0.42);
  --info-soft: rgba(37, 99, 235, 0.16);
  --info-text: #93C5FD;
  --info-border: rgba(37, 99, 235, 0.42);
  --neutral-soft: rgba(148, 163, 184, 0.12);
  --neutral-text: #CBD5E1;
  --neutral-border: rgba(148, 163, 184, 0.24);

  --cat-academic: #9590FB;
  --cat-academic-soft: rgba(109, 103, 245, 0.16);
  --cat-sports: #2DD4BF;
  --cat-sports-soft: rgba(45, 212, 191, 0.13);
  --cat-cultural: #E879F9;
  --cat-cultural-soft: rgba(232, 121, 249, 0.13);
  --cat-exam: #FBBF24;
  --cat-exam-soft: rgba(251, 191, 36, 0.13);
  --cat-holiday: #FB7185;
  --cat-holiday-soft: rgba(251, 113, 133, 0.13);
  --cat-meeting: #60A5FA;
  --cat-meeting-soft: rgba(96, 165, 250, 0.13);
  --cat-general: #A3ADC2;
  --cat-general-soft: rgba(163, 173, 194, 0.13);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px -16px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(129, 124, 250, 0.4);
}