/* Campus NEXT design tokens – Lumen design system with the Weisse Elfen brand layer (Sajjad 2026-10-22): wine #A21036 for
   actions and links, deep wine for hover / dark surfaces, glow for highlights, rose / blush for soft backgrounds and selected
   states, warm greys, "Nunito Sans" for the UI and "Fraunces" for a few big headings (both self-hosted). A franchise colour
   or another accent (Settings → Appearance, Company data → Design) overrides the --color-primary* / --color-accent* tokens
   at runtime (public/js/ui/brand.js). Light / dark / auto, density, text size and motion come from Profile → Appearance.
   Phones and touch screens get 44 px targets and 16 px text automatically. */
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("/fonts/nunito-sans/files/nunito-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url("/fonts/nunito-sans/files/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/fraunces/files/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* warm greys (ink #1C1417, muted #6A5F63) */
  --n-0: #fff; --n-50: #faf7f8; --n-100: #f5eff1; --n-200: #ece2e5; --n-300: #ddd0d4; --n-400: #a8999e;
  --n-500: #6a5f63; --n-600: #554a4e; --n-700: #3d3336; --n-800: #2a2124; --n-900: #1c1417;

  /* Weisse Elfen brand */
  --brand-wine: #a21036; --brand-wine-deep: #6e0a25; --brand-glow: #d9375f; --brand-rose: #f8e6ec; --brand-blush: #fdf6f8; --brand-line: #f0dce2;

  --color-primary: var(--brand-wine);
  --color-primary-hover: var(--brand-wine-deep);
  --color-primary-subtle: var(--brand-blush);
  --color-primary-subtle-2: var(--brand-rose);
  --color-primary-text: var(--brand-wine);
  --color-accent: var(--brand-glow);       /* highlights: progress, rings, learner accents */
  --color-accent-subtle: var(--brand-rose);
  --color-accent-text: var(--brand-wine);
  /* placeholder of course images without a picture: gradient of the accent only (follows the franchise colour) */
  --brand-placeholder: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 68%, var(--color-surface)) 100%);
  --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(--brand-line);
  --color-border-strong: var(--n-300);
  --color-divider: #f4eaed;
  --color-text: var(--n-900);
  --color-text-secondary: var(--n-600);
  --color-text-muted: var(--n-500);
  --color-text-placeholder: #7d7176;
  --color-overlay: rgba(28, 20, 23, .45);
  --color-focus-ring: rgba(162, 16, 54, .38);

  --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;
  /* info follows the accent (Weisse Elfen wine or the franchise colour) – no blue in the brand look (Sajjad 2026-10-22) */
  --color-info: var(--color-primary); --color-info-subtle: var(--color-primary-subtle); --color-info-text: var(--color-primary-text);

  --chart-1: var(--color-primary); --chart-2: #3fbcb0; --chart-3: #f59e0b; --chart-4: #d9375f; --chart-5: #06b6d4; --chart-6: #94a3b8;
  --chart-grid: #ece2e5; --chart-axis: #a8999e;

  --font-family-base: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Fraunces", Georgia, "Times New Roman", 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(28, 20, 23, .05);
  --shadow-2: 0 1px 3px rgba(28, 20, 23, .08), 0 1px 2px rgba(28, 20, 23, .04);
  --shadow-3: 0 8px 24px -6px rgba(28, 20, 23, .14), 0 2px 6px -2px rgba(28, 20, 23, .06);

  /* density (normal) */
  --section-gap: 40px; --card-gap: 20px;   /* spacing system (task z9): between page regions / between cards */
  --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"] {
  /* deep wine / near-black surfaces, rose accents (all text pairs ≥ 4.5:1) */
  --color-background: #14060c; --color-surface: #1d0a12; --color-surface-secondary: #2a0815; --color-surface-raised: #261019;
  --color-border: #3d1a28; --color-border-strong: #52263a; --color-divider: #2c121d;
  --color-text: #f7eef1; --color-text-secondary: #d4c2c8; --color-text-muted: #ad979f; --color-text-placeholder: #9a8890;
  --color-primary: #ee6f8f; --color-primary-hover: #f39ab0; --color-text-on-primary: #14060c;
  --color-primary-text: #f39ab0;
  --color-primary-subtle: rgba(238, 111, 143, .14); --color-primary-subtle-2: rgba(238, 111, 143, .24);
  --color-accent: #f39ab0; --color-accent-subtle: rgba(243, 154, 176, .16); --color-accent-text: #f39ab0;
  --color-focus-ring: rgba(243, 154, 176, .5);
  --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: var(--color-primary); --color-info-subtle: var(--color-primary-subtle); --color-info-text: var(--color-primary-text);
  --chart-2: #70d8cb; --chart-3: #fbbf24; --chart-4: #f39ab0; --chart-5: #22d3ee; --chart-grid: #2c121d; --chart-axis: #7a6068;
  --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;
}

/* personal layout (Profile → Appearance): large text scales every rem size; reduce motion also without the OS setting */
:root[data-text="large"] { font-size: 112.5%; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }