/* SNU colour system — generated by tools/colour-system/palette.mjs (do not edit by hand; see COLOUR-SYSTEM.md).
   Sources: the Somali flag (blue field, white star), the SNU emblem (sky shield, gold wreath, crimson ribbon) and the
   national emblem (blue shield, gold crown and frame). Every scale is made in OKLCH, so step 700 is equally dark in
   every hue; 30 text/background pairings are checked against WCAG 2.2 AA on each run (0 failures). */

/* ---- The University: Somali Blue, Emblem Sky, Wreath Gold, Ribbon Crimson, Coral Stone (neutral) ---- */
:root {
  --c-blue-50: #f1f7ff;
  --c-blue-100: #e1eeff;
  --c-blue-200: #c0dcff;
  --c-blue-300: #96c4ff;
  --c-blue-400: #61a4f7;
  --c-blue-500: #3986e4;
  --c-blue-600: #1b6cc7;
  --c-blue-700: #0458ab;
  --c-blue-800: #00458a;
  --c-blue-900: #003167;
  --c-blue-950: #001f46;
  --c-sky-50: #eef9ff;
  --c-sky-100: #dbf1fd;
  --c-sky-200: #b6e0f7;
  --c-sky-300: #88cbee;
  --c-sky-400: #4aaedc;
  --c-sky-500: #0092c5;
  --c-sky-600: #0077a1;
  --c-sky-700: #006285;
  --c-sky-800: #004d6a;
  --c-sky-900: #00384e;
  --c-sky-950: #002434;
  --c-gold-50: #fcf6eb;
  --c-gold-100: #f6ecd8;
  --c-gold-200: #ead7b1;
  --c-gold-300: #dbbd81;
  --c-gold-400: #c39b44;
  --c-gold-500: #aa7e00;
  --c-gold-600: #8b6700;
  --c-gold-700: #725400;
  --c-gold-800: #5b4200;
  --c-gold-900: #432f00;
  --c-gold-950: #2c1e00;
  --c-crimson-50: #fff4f3;
  --c-crimson-100: #ffe6e4;
  --c-crimson-200: #ffcac5;
  --c-crimson-300: #ffa59e;
  --c-crimson-400: #f07871;
  --c-crimson-500: #da534f;
  --c-crimson-600: #bc3737;
  --c-crimson-700: #a02427;
  --c-crimson-800: #82151a;
  --c-crimson-900: #63070e;
  --c-crimson-950: #450005;
  --c-slate-50: #f5f7f8;
  --c-slate-100: #eaedf0;
  --c-slate-200: #d5dadf;
  --c-slate-300: #bac2ca;
  --c-slate-400: #99a3ae;
  --c-slate-500: #7d8793;
  --c-slate-600: #646e7a;
  --c-slate-700: #515a65;
  --c-slate-800: #3f4750;
  --c-slate-900: #2d343b;
  --c-slate-950: #1c2127;
  --c-white: #ffffff;
}

/* ---- The main website: the frontend's variables re-pointed to the University scales ---- */
:root {
  --navy: var(--c-blue-900);
  --navy-900: var(--c-blue-950);
  --navy-800: var(--c-blue-800);
  --navy-600: var(--c-blue-700);
  --blue: var(--c-blue-700);
  --blue-600: var(--c-blue-800);
  --blue-700: var(--c-blue-900);
  --blue-50: var(--c-blue-50);
  --blue-100: var(--c-blue-100);
  --sky: var(--c-sky-500);
  --sky-700: var(--c-sky-600);
  --sky-50: var(--c-sky-50);
  --gold: var(--c-gold-400);
  --gold-400: var(--c-gold-300);
  --gold-700: var(--c-gold-700);
  --gold-50: var(--c-gold-50);
  --crimson: var(--c-crimson-700);
  --crimson-700: var(--c-crimson-800);
  --crimson-50: var(--c-crimson-50);
  --surface: var(--c-slate-50);
  --ink: var(--c-slate-950);
  --ink-2: var(--c-slate-800);
  --muted: var(--c-slate-600);
  --line: var(--c-slate-200);
  --line-2: var(--c-slate-100);
  --success: #0e6b31;
  --danger: var(--c-crimson-700);
  --accent: var(--c-blue-600);
}
/* SNU Classic header (snu-header.css keeps its original green defaults on .snuh): the University blue instead.
   header.snuh is one step more specific; the Theme Builder's header choices use the same selector and load later. */
header.snuh {
  --snuh-green-950: var(--c-blue-950); --snuh-green-900: var(--c-blue-700); --snuh-green-700: var(--c-blue-700); --snuh-green-50: var(--c-blue-50);
  --snuh-ink: var(--c-slate-950); --snuh-muted: var(--c-slate-600); --snuh-line: var(--c-slate-200); --snuh-focus: var(--c-blue-600);
}
/* On the dark areas the sky blue is its light tone (text and lines stay readable) */
:is(.site-footer, .page-hero, .section-dark, .rector-strip, .grad-banner, .fac-tile, .qa-panel, .fac-dean-band, .quick-strip-inner, .ann-band) { --sky: var(--c-sky-300); }

/* ---- Surfaces: the frontend's glows and photo overlays, made from the website's own colours ----
   (portal.css paints them with fixed values of the earlier palette; a browser without color-mix() keeps those) */
.is-home .site-header { background: linear-gradient(180deg, color-mix(in oklab, var(--navy-900) 88%, transparent) 0%, color-mix(in oklab, var(--navy-900) 45%, transparent) 60%, transparent 100%); }
.mega-tile::after { background: linear-gradient(0deg, color-mix(in oklab, var(--navy-900) 85%, transparent) 0%, color-mix(in oklab, var(--navy) 45%, transparent) 55%, color-mix(in oklab, var(--navy) 25%, transparent) 100%); }
.mega-tile:hover::after { background: linear-gradient(0deg, color-mix(in oklab, var(--navy-900) 92%, transparent) 0%, color-mix(in oklab, var(--navy) 60%, transparent) 100%); }
.search-overlay { background: color-mix(in oklab, var(--navy-900) 88%, transparent); }
.hero-shade { background: linear-gradient(0deg, color-mix(in oklab, var(--navy-900) 92%, transparent) 0%, color-mix(in oklab, var(--navy-900) 45%, transparent) 45%, color-mix(in oklab, var(--navy-900) 20%, transparent) 70%, color-mix(in oklab, var(--navy-900) 55%, transparent) 100%), linear-gradient(90deg, color-mix(in oklab, var(--navy-900) 55%, transparent), transparent 65%); }
.hero-thumbs button::after { background: linear-gradient(0deg, color-mix(in oklab, var(--navy-900) 85%, transparent), transparent 70%); }
.quick-strip-inner, .grad-banner { background: radial-gradient(600px 200px at 90% 0%, color-mix(in oklab, var(--sky) 30%, transparent), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy)); }
.rector-strip, .fac-dean-band { background: radial-gradient(700px 300px at 90% 0%, color-mix(in oklab, var(--sky) 25%, transparent), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy)); }
.ann-band { background: radial-gradient(1100px 500px at 15% 0%, color-mix(in oklab, var(--blue) 70%, transparent), transparent 60%), var(--navy); }
.section-dark { background: radial-gradient(1200px 600px at 85% -10%, color-mix(in oklab, var(--sky) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy)); }
.research-item { background: color-mix(in oklab, var(--navy-900) 55%, transparent); }
.research-item:hover { background: color-mix(in oklab, var(--navy-900) 30%, transparent); }
.page-hero { background: radial-gradient(900px 400px at 88% 0%, color-mix(in oklab, var(--sky) 28%, transparent), transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-800) 100%); }
.page-hero.has-image .page-hero-bg::after { background: linear-gradient(90deg, color-mix(in oklab, var(--navy-900) 95%, transparent), color-mix(in oklab, var(--navy) 80%, transparent) 55%, color-mix(in oklab, var(--navy) 48%, transparent)); }
.site-footer { background: radial-gradient(1000px 400px at 50% 0%, color-mix(in oklab, var(--blue) 45%, transparent), transparent 70%), var(--navy); }
.footer-bottom { background: color-mix(in oklab, var(--navy-900) 40%, transparent); }
.footer-cta { background: linear-gradient(120deg, color-mix(in oklab, var(--sky) 16%, transparent), rgba(255, 255, 255, .05)); }
.avatar-xl { border-color: color-mix(in oklab, var(--sky) 85%, transparent); }

/* ---- The faculty websites: the same University palette as the main website ----
   faculty.css sets older faculty colours on .faculty-site; this rule (loaded later) replaces them. An accent chosen in
   Faculties › Faculty website › Colour is printed in the page after this file and wins. */
.faculty-site {
  --navy: var(--c-blue-900);
  --navy-900: var(--c-blue-950);
  --navy-800: var(--c-blue-800);
  --navy-600: var(--c-blue-700);
  --blue: var(--c-blue-700);
  --blue-600: var(--c-blue-800);
  --blue-700: var(--c-blue-900);
  --blue-50: var(--c-blue-50);
  --blue-100: var(--c-blue-100);
  --sky: var(--c-sky-500);
  --sky-700: var(--c-sky-600);
  --sky-50: var(--c-sky-50);
  --gold: var(--c-gold-400);
  --gold-400: var(--c-gold-300);
  --gold-700: var(--c-gold-700);
  --gold-50: var(--c-gold-50);
  --crimson: var(--c-crimson-700);
  --crimson-700: var(--c-crimson-800);
  --crimson-50: var(--c-crimson-50);
  --surface: var(--c-slate-50);
  --ink: var(--c-slate-950);
  --ink-2: var(--c-slate-800);
  --muted: var(--c-slate-600);
  --line: var(--c-slate-200);
  --line-2: var(--c-slate-100);
  --success: #0e6b31;
  --danger: var(--c-crimson-700);
  --accent: var(--c-blue-600);
  --accent-ink: var(--c-blue-900);
  --fac-50: var(--c-blue-50);
  --fac-100: var(--c-blue-100);
  --fac-200: var(--c-blue-200);
  --fac-300: var(--c-blue-300);
  --fac-400: var(--c-blue-400);
  --fac-500: var(--c-blue-500);
  --fac-600: var(--c-blue-600);
  --fac-700: var(--c-blue-700);
  --fac-800: var(--c-blue-800);
  --fac-900: var(--c-blue-900);
  --fac-950: var(--c-blue-950);
}