/* The ICLS look for ICLS LMS (tools/portal/build-icls.php copies this to public/portal/ic/css/icls.css and links it after every
   other sheet, in place of the Greenwich one). Colours from the ICLS crest (Adam's LOGO-ICLS-High-Res.pdf, 31 Oct 2026): shield
   navy #062A46 / #0B2A46, banner red #B11F23, gavel gold #E2AE3E. Navy carries the app (sidebar, hero, buttons); gold is the
   one highlight; the red stays in the logo. Typeface: Inter (SIL Open Font Licence, the variable file the ICLS admission form
   already serves). The portal's own screens are unchanged: only its colour ramps, typeface and logo swap. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root, :root[data-brand] {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --p-900: #06182A;   /* sidebar: a step below the shield navy, so the crest keeps its edge on it */
  --p-800: #0B2A46;   /* ICLS navy: hero, app plate */
  --p-700: #123A5E;
  --p-600: #194B78;
  --p-500: #1F5C96;   /* the interactive accent */
  --p-400: #3B78B4;
  --p-300: #86ABD3;
  --p-200: #C3D6EA;
  --p-100: #E5EDF6;
  --p-50:  #F3F7FB;

  /* the second colour: the gavel's gold */
  --g-700: #7A5A12;
  --g-600: #9A7218;
  --g-500: #B98A22;
  --g-400: #E2AE3E;
  --g-200: #F4DFA9;
  --g-100: #FAF0D6;
  --g-50:  #FDF8EC;

  --n-25:  #FAFBFC;
  --n-50:  #F5F7FA;
  --n-100: #EEF1F5;
  --n-150: #E5E9EF;
  --n-200: #DCE1E8;
  --n-300: #C3CAD5;
  --n-400: #66707F;
  --n-500: #4F5968;
  --n-700: #303A49;
  --n-900: #111A27;

  --brand: var(--p-800);
  --accent: #1F5C96;
  --accent-hover: #194B78;
  --accent-tint: #E5EDF6;
  --accent-ring: rgba(31, 92, 150, .24);
  --info: #1F5C96;  --info-tint: #E5EDF6;
  --pink: #2C6CAB;  --pink-tint: #E5EDF6;
  --bar: rgba(245, 247, 250, .84);
  --toast-bg: #0E1C2C;
  --hero-ink: #E2AE3E;
  --hero-glow: transparent;
  --shadow-xs: 0 1px 2px rgba(11, 42, 70, .05);
  --shadow-sm: 0 1px 3px rgba(11, 42, 70, .07), 0 1px 2px rgba(11, 42, 70, .03);
  --shadow-md: 0 6px 16px rgba(11, 42, 70, .09), 0 2px 5px rgba(11, 42, 70, .04);
  --shadow-lg: 0 24px 56px rgba(6, 24, 42, .22), 0 6px 16px rgba(6, 24, 42, .08);
}
:root[data-theme="dark"], :root[data-theme="dark"][data-brand] {
  --bg: #081420;
  --card: #0F1D2B;
  --surface-2: #132333;
  --fill: #182A3C;
  --fill-2: #203448;
  --brand: #E2AE3E;
  --accent: #5B9BD8;
  --accent-hover: #7AB0E3;
  --accent-tint: #13263A;
  --accent-ring: rgba(91, 155, 216, .42);
  --info: #7AB0E3;  --info-tint: #13263A;
  --pink: #7AB0E3;  --pink-tint: #13263A;
  --g-700: #F6E2B0; --g-600: #F0D08A; --g-500: #E8BE5E; --g-400: #E2AE3E;
  --g-200: #4A3B17; --g-100: #2E2511; --g-50: #211B0D;
  --p-50: #0E1A27; --p-100: #13263A; --p-200: #22405F;
  --brand-50: var(--p-50); --brand-100: var(--p-100); --brand-200: var(--p-200);
  --bar: rgba(9, 20, 32, .84);
  --toast-bg: #1A2B3E;
}

h1, h2, h3, h4, .page-title { letter-spacing: -.011em; }

/* The crest is upright (191 × 256); the lockup keeps its own proportion (960 × 326). */
.brand-mark, .topbar-mark, .pf-about-mark { object-fit: contain; }
.topbar-mark { width: 21px; height: 28px; }
/* the crest is full colour: never the white silhouette the one-colour marks get in the dark */
:root[data-theme="dark"] .topbar-mark, :root[data-theme="dark"] .pf-about-mark { filter: none; }
.vle-logo-mark { object-fit: contain; }

/* The sign-in page keeps its neutral buttons, in navy. */
#login-root { --accent: #0B2A46; --accent-hover: #123A5E; --accent-tint: #E5EDF6; --accent-ring: rgba(11, 42, 70, .22); }
:root[data-theme="dark"] #login-root { --accent: #5B9BD8; --accent-hover: #7AB0E3; --accent-tint: #13263A; --accent-ring: rgba(91, 155, 216, .42); }

/* The VLE keeps its dark cinema canvas, in ICLS navy with the gold accent. */
:root, :root[data-brand] {
  --vbg: #04101C;
  --vbg2: #0A1A2B;
  --vbg3: #10243A;
  --vgold: #E2AE3E;
  --vaccent-rgb: 226, 174, 62;
  --vviolet: #0E2A47;
}
.vle-logo-word { letter-spacing: .02em; }

/* The ICLS logo: the full lockup in the sidebar (white words, on navy) and on the sign-in card (black words on light, white in
   the dark). Logo files: tools/portal/icls/brand, from Adam's LOGO-ICLS-High-Res.pdf (only the words recoloured for dark). */
.ic-logo { padding: 2px 2px 0; max-width: 100%; }
.ic-logo img { display: block; width: 196px; max-width: 100%; height: auto; }
.ic-login-logo { margin: 0 0 22px; }
.ic-login-logo img { display: block; width: 264px; max-width: 82%; height: auto; }
.ic-login-logo .lc-on-dark { display: none; }
:root[data-theme="dark"] .ic-login-logo .lc-on-light { display: none; }
:root[data-theme="dark"] .ic-login-logo .lc-on-dark { display: block; }

/* Choosing your own password after a temporary one (js/password-change.js): the sign-in card, over everything */
.pwc-root { position: fixed; inset: 0; z-index: 3000; background: var(--bg); overflow: auto; display: grid; }
body.pwc-open { overflow: hidden; }
.pwc-root .login-wrap { min-height: 100%; }
.pwc-show { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin: 2px 0 14px; cursor: pointer; }
.pwc-show input { width: 15px; height: 15px; accent-color: var(--accent); }
.pwc-out { text-align: center; margin: 14px 0 0; font-size: 13px; }
.pwc-root .login-submit { width: 100%; }