/* EASAL design tokens, v2 (2026-10-07). The ONLY file allowed to hold raw colour,
   font, spacing, radius, shadow and motion values. Portal (EASAL.Web) and app
   (EASAL.Maui) both read these; components.css holds the shared component skin.
   Brand: EASAL Logo Guidelines, University of Northampton. Raw brand colours are
   decorative (logo, gradient bar, tints behind icons and illustrations); every
   interactive or text colour is a derived shade that passes WCAG 2.2 AA. */
:root {
  /* ---- Raw brand palette (decorative only; never on text or controls) ---- */
  --e-brand-yellow: #F3CB27;
  --e-brand-orange: #EA5B30;          /* sampled from the logo; PDF lists #1a171b (typo). To confirm. */
  --e-brand-magenta: #C4418E;
  --e-brand-teal: #00A8B8;
  --e-brand-green: #1AA55B;
  --e-brand-yellow-tint: #FCEFC9;     /* the guidelines' 30% tints: stat-tile icon discs, illustrations, sign-in panel */
  --e-brand-orange-tint: #FAD0BC;
  --e-brand-magenta-tint: #ECCEE1;
  --e-brand-teal-tint: #C9E7EA;
  --e-brand-green-tint: #CFE6CF;
  --e-brand-gradient: linear-gradient(90deg, #F3CB27 0%, #EA5B30 22%, #C4418E 45%, #6E7BB5 60%, #00A8B8 78%, #1AA55B 100%);

  /* ---- Semantic brand slots (derived) ---- */
  --e-brand-1: #006B78;               /* teal ink */
  --e-brand-2: #A8306F;               /* magenta ink */
  --e-brand-3: #C9E7EA;               /* teal tint */

  /* ---- Surfaces and text ---- */
  --e-bg: #F4F5F7;
  --e-surface: #FFFFFF;
  --e-surface-raised: #FFFFFF;
  --e-surface-sunken: #ECEDF0;        /* NEW: table header, neutral badge fill, bar tracks, disabled fills */
  --e-line: #DCDFE4;
  --e-line-soft: #ECEDF0;             /* NEW: table row dividers */
  --e-line-strong: #C8CCD3;           /* NEW (build): card-link hover border, was a raw value in components.css */
  --e-ink: #1A171B;
  --e-ink-muted: #4B4F57;
  --e-ink-faint: #6A6F78;

  /* ---- Actions ---- */
  --e-primary: #006B78;
  --e-primary-hover: #00525C;
  --e-primary-contrast: #FFFFFF;
  --e-primary-rgb: 0, 107, 120;       /* NEW (build): --e-primary as an RGB triple for Bootstrap's --bs-primary-rgb */
  --e-primary-soft: #E3F3F5;          /* MEANING CHANGED: now an opaque wash (selected rows, hover tint); was rgba */
  --e-accent: #A8306F;
  --e-focus-ring: #A8306F;

  /* ---- Feedback ---- */
  --e-success: #1E7A47;  --e-success-soft: #DFF1E4;
  --e-warning: #8F5400;  --e-warning-soft: #FCEFC9;
  --e-danger: #B3341C;   --e-danger-soft: #FCE3DA;
  --e-danger-hover: #8F2914;          /* NEW (build): danger button hover, was a raw value in components.css */
  --e-info: #006B78;     --e-info-soft: #E3F3F5;

  /* ---- Grades (blue / green / amber / red / grey; never a raw brand colour) ---- */
  --e-grade-outstanding: #2E56A6; --e-grade-outstanding-soft: #E6EDF9;
  --e-grade-good: #1E7A47;        --e-grade-good-soft: #DFF1E4;
  --e-grade-improve: #8F5400;     --e-grade-improve-soft: #FBF0CF;
  --e-grade-inadequate: #B3341C;  --e-grade-inadequate-soft: #FADBD2;
  --e-grade-na: #5F646D;          --e-grade-na-soft: #ECEDF0;
  --e-answered: #006B78;
  --e-unanswered: #80858E;
  --e-current: #A8306F;

  /* ---- Type: one rounded family everywhere ---- */
  --e-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --e-font-family-heading: var(--e-font-family);
  --e-font-size-xs: 0.75rem;          /* caption 12 */
  --e-font-size-sm: 0.875rem;         /* small 14 */
  --e-font-size: 1rem;                /* body 16 */
  --e-font-size-lg: 1.25rem;          /* section title 20 */
  --e-font-size-xl: 1.75rem;          /* page title 28 */
  --e-font-size-display: 2.5rem;      /* NEW: stat numbers 40 */
  --e-line-height: 1.5;
  --e-heading-weight: 800;
  --e-weight-semibold: 600;           /* NEW: labels, nav, buttons */
  --e-numeric: tabular-nums;          /* NEW: apply to dates, scores, table numbers */

  /* ---- Space, shape, elevation, motion ---- */
  --e-space-1: 4px; --e-space-2: 8px; --e-space-3: 16px; --e-space-4: 24px; --e-space-5: 40px;
  --e-radius: 12px;                   /* MEANING CHANGED: cards 10 → 12 */
  --e-radius-sm: 8px;                 /* MEANING CHANGED: controls 6 → 8 */
  --e-radius-pill: 999px;             /* NEW */
  --e-shadow: 0 1px 2px rgba(26,23,27,.04), 0 1px 1px rgba(26,23,27,.03);            /* rest */
  --e-shadow-raised: 0 1px 2px rgba(26,23,27,.06), 0 8px 24px rgba(26,23,27,.08);   /* NEW: hover, menus, sheets */
  --e-motion: 150ms ease;             /* NEW */
  --e-touch-min: 44px;
  --e-control-h: 40px;                /* NEW: portal buttons and inputs */
  --e-control-h-lg: 56px;             /* NEW: tablet primary buttons, code field */
  --e-content-max: 72rem;             /* MEANING CHANGED: 60rem → 72rem */
  --e-gutter: 24px;                   /* NEW */

  /* ---- Logo slots ---- */
  --e-logo-main-h: 28px;
  --e-logo-main-h-lg: 40px;
  --e-logo-square: 32px;
  --e-icon: 20px;                     /* NEW: UI icon size */
}
/* Tablet app: <html class="e-tablet"> */
.e-tablet {
  --e-font-size: 1.125rem;
  --e-font-size-sm: 0.9375rem;
  --e-font-size-lg: 1.375rem;
  --e-font-size-xl: 2rem;
  --e-line-height: 1.55;
  --e-icon: 24px;
  --e-control-h: 44px;
}
@media (prefers-reduced-motion: reduce) { :root { --e-motion: 0s; } }