/* =====================================================================
   tokens.css – Magnibiz design tokens
   Single source of truth for colour, type, shape, space and layout.
   RULE: components and templates use var(--mb-*) only. Never hardcode a hex.
   The four brand colours are official (colour sheet): MB Blue #153741 (ink), MB Gold #CFAE78
   (accent), Light Grey #E6E5DF, Dark Grey #0E1010 (text). Everything else (page background,
   sand, lines, status) is derived or read from screenshots: adjust HERE only.
   ===================================================================== */
:root {
  /* ---- The four official brand colours: the ONLY place their hex values live ---- */
  --mb-brand-blue: #153741;        /* MB Blue   (21, 55, 65)   */
  --mb-brand-gold: #CFAE78;        /* MB Gold   (207, 174, 120) */
  --mb-brand-light-grey: #E6E5DF;  /* Light Grey (230, 229, 223) */
  --mb-brand-dark-grey: #0E1010;   /* Dark Grey (14, 16, 16)   */

  /* ---- Roles (point at the brand colours, never at a hex) ---- */
  --mb-ink: var(--mb-brand-blue);            /* deep teal: primary actions, sidebar, dark cards */
  --mb-ink-rgb: 21, 55, 65;     /* same colour as RGB triplet (Bootstrap bridge) */
  --mb-ink-hover: #24495A;
  --mb-accent: var(--mb-brand-gold);         /* gold: accent on dark, underline, progress on dark */
  --mb-accent-ink: #7B6234;     /* gold-brown: text/icons on sand or white (AA on sand) */
  --mb-sand: #EDE5D6;           /* highlights, quiet badges, selected rows */
  --mb-bg: var(--mb-brand-light-grey);   /* page background */
  --mb-surface: #FFFFFF;        /* cards, inputs, top bars */

  /* ---- Lines and neutrals ---- */
  --mb-line: #D0CFC6;           /* a step darker than Light Grey so borders show on the page background */
  --mb-line-soft: var(--mb-brand-light-grey);
  --mb-track: #D3DADD;          /* progress track, off-state switch */
  --mb-text: var(--mb-brand-dark-grey);
  --mb-muted: #4D575C;          /* secondary text (AA on bg and white) */
  --mb-faint: #7A8388;          /* icons and placeholders ONLY, not body text */

  /* ---- Status ---- */
  --mb-warn-bg: #F6EBD3;        /* warnings use gold family: the brand has no green/yellow */
  --mb-danger: #A63D2B;
  --mb-danger-bg: #F6E3DE;

  /* ---- Type ---- */
  --mb-font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mb-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mb-head-weight: 800;
  --mb-head-tracking: -0.01em;
  --mb-fs-xs: 0.75rem;
  --mb-fs-sm: 0.8125rem;
  --mb-fs-base: 0.9375rem;
  --mb-fs-md: 1.0625rem;
  --mb-fs-lg: 1.25rem;

  /* ---- Shape ---- */
  --mb-r-sm: 10px;              /* inner tiles, thumbnails */
  --mb-r-md: 14px;              /* inputs, notices */
  --mb-r-lg: 20px;              /* cards */
  --mb-r-pill: 999px;           /* buttons, chips, badges */

  /* ---- Space (4px scale) ---- */
  --mb-s-1: 4px;  --mb-s-2: 8px;  --mb-s-3: 12px; --mb-s-4: 16px;
  --mb-s-5: 24px; --mb-s-6: 32px; --mb-s-7: 40px; --mb-s-8: 64px;

  /* ---- Layout ---- */
  --mb-sidebar-w: 248px;
  --mb-content-max: 1120px;

  /* ---- Focus ---- */
  --mb-focus: 0 0 0 3px rgba(196, 169, 123, 0.65);
}

/* =====================================================================
   Creator theme layer (student area + public pages)
   The course creator's brand overrides ONLY these tokens. Django outputs
   them on <body> from the business settings, e.g.
     <body class="mb-body mb-student" style="--mb-ink:#3B2F2A; ...">
   Admin screens never take creator values.
   Overridable: --mb-ink, --mb-ink-rgb, --mb-ink-hover, --mb-accent,
   --mb-accent-ink, --mb-sand, --mb-bg, --mb-track, --mb-muted,
   --mb-font-head, --mb-head-weight, --mb-head-tracking
   ===================================================================== */

/* Content styles layer (--cs-*): the creator's Indholdsstile (H1 to H6, paragraph, button)
   also drive what students and the public see. They map to --cs-* variables on <body>
   (see components.css, "Creator content styles") and are optional: every use falls back
   to the tokens above. The admin never reads --cs-*.
   ===================================================================== */