/* Campus NEXT design tokens – Lumen style (docs/analysis/03-lumen-design.md §11): iris for actions, the Weisse Elfen
   rose as accent only, neutral greys, Inter. Light / dark / auto, density and radius are switched at runtime
   (Settings → Appearance, Profile). Phones and touch screens get 44 px targets and 16 px text automatically. */
@font-face {
  font-family: "Inter var";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --n-0: #fff; --n-50: #f8f9fb; --n-100: #f1f3f6; --n-200: #e4e7ec; --n-300: #d0d5dd; --n-400: #98a2b3;
  --n-500: #5d6b82; --n-600: #475467; --n-700: #344054; --n-800: #1d2939; --n-900: #101828;

  --color-primary: #5b55d9;
  --color-primary-hover: #4b44bd;
  --color-primary-subtle: #f3f3ff;
  --color-primary-subtle-2: #e7e7ff;
  --color-primary-text: #4b44bd;
  --color-accent: #b0647a;               /* Weisse Elfen rose (accent: brand tile, learner highlights) */
  --color-accent-subtle: #fbf2f4;
  --color-accent-text: #8f4d61;
  --color-text-on-primary: #fff;

  --color-background: var(--n-50);
  --color-surface: var(--n-0);
  --color-surface-secondary: var(--n-100);
  --color-surface-raised: var(--n-0);
  --color-border: var(--n-200);
  --color-border-strong: var(--n-300);
  --color-divider: #eef0f3;
  --color-text: var(--n-900);
  --color-text-secondary: var(--n-600);
  --color-text-muted: var(--n-500);
  --color-text-placeholder: #6b7689;
  --color-overlay: rgba(16, 24, 40, .45);
  --color-focus-ring: rgba(91, 85, 217, .40);

  --color-success: #16a34a; --color-success-subtle: #ecfdf3; --color-success-text: #15803d;
  --color-warning: #d97706; --color-warning-subtle: #fffaeb; --color-warning-text: #b45309;
  --color-danger: #dc2626; --color-danger-subtle: #fef3f2; --color-danger-text: #b91c1c;
  --color-info: #2563eb; --color-info-subtle: #eff6ff; --color-info-text: #1d4ed8;

  --chart-1: #6f6eea; --chart-2: #3fbcb0; --chart-3: #f59e0b; --chart-4: #c97f91; --chart-5: #06b6d4; --chart-6: #94a3b8;
  --chart-grid: #e4e7ec; --chart-axis: #98a2b3;

  --font-family-base: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-size-xs: .75rem; --font-size-sm: .8125rem; --font-size-md: .875rem; --font-size-lg: 1rem;
  --font-size-xl: 1.125rem; --font-size-2xl: 1.375rem; --font-size-3xl: 1.75rem;

  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-3: 0 8px 24px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .06);

  /* density (normal) */
  --d-nav-w: 256px; --d-top-h: 56px; --d-ctl-h: 38px; --d-row-h: 46px; --d-pad: var(--space-6); --d-gap: var(--space-5);
  --d-radius-card: var(--radius-lg); --d-radius-ctl: var(--radius-md); --d-font-body: var(--font-size-md);
  --d-content-max: 1360px;
  color-scheme: light;
}

:root[data-density="compact"] { --d-ctl-h: 32px; --d-row-h: 38px; --d-pad: var(--space-4); --d-gap: var(--space-3); --d-font-body: var(--font-size-sm); }
:root[data-density="comfortable"] { --d-ctl-h: 44px; --d-row-h: 54px; --d-pad: var(--space-8); --d-gap: var(--space-6); --d-font-body: var(--font-size-lg); }
:root[data-radius="sharp"] { --d-radius-card: var(--radius-sm); --d-radius-ctl: var(--radius-xs); }
:root[data-radius="round"] { --d-radius-card: 20px; --d-radius-ctl: var(--radius-full); }

/* touch screens and phones: never below 44 px targets, 16 px text (also avoids iOS zoom on inputs) */
@media (pointer: coarse) { :root { --d-ctl-h: 44px; --d-row-h: 56px; } }
@media (max-width: 640px) {
  :root { --d-font-body: var(--font-size-lg); --d-pad: var(--space-4); --d-gap: var(--space-4); --d-radius-card: var(--radius-xl); }
}

:root[data-theme="dark"] {
  --color-background: #0d1017; --color-surface: #141822; --color-surface-secondary: #1a1f2b; --color-surface-raised: #1c2230;
  --color-border: #262d3b; --color-border-strong: #343d4f; --color-divider: #1e2431;
  --color-text: #e8ebf1; --color-text-secondary: #a7b0c0; --color-text-muted: #8a94a6; --color-text-placeholder: #7d8799;
  --color-primary: #8b8cf5; --color-primary-hover: #afb0fb; --color-text-on-primary: #0d1017;   /* AA contrast in dark mode */
  --color-primary-text: #afb0fb;
  --color-primary-subtle: rgba(139, 140, 245, .14); --color-primary-subtle-2: rgba(139, 140, 245, .24);
  --color-accent: #e0aab7; --color-accent-subtle: rgba(201, 127, 145, .16); --color-accent-text: #e0aab7;
  --color-focus-ring: rgba(139, 140, 245, .50);
  --color-overlay: rgba(0, 0, 0, .6);
  --color-success-subtle: rgba(34, 197, 94, .12); --color-success-text: #4ade80;
  --color-warning-subtle: rgba(245, 158, 11, .12); --color-warning-text: #fbbf24;
  --color-danger-subtle: rgba(239, 68, 68, .12); --color-danger-text: #f87171;
  --color-info-subtle: rgba(59, 130, 246, .12); --color-info-text: #60a5fa;
  --chart-1: #8b8cf5; --chart-2: #70d8cb; --chart-3: #fbbf24; --chart-4: #e0aab7; --chart-5: #22d3ee; --chart-grid: #232a37; --chart-axis: #5b6577;
  --shadow-1: none; --shadow-2: 0 1px 3px rgba(0, 0, 0, .4); --shadow-3: 0 12px 28px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }