/* ==========================================================================
   University of Huddersfield — brand foundation
   --------------------------------------------------------------------------
   Single source of truth for colour, type and shape across every page in
   this interface. Palette values are taken from the official corporate
   PowerPoint theme ("University of Huddersfield" colour scheme) and the
   brand background artwork, so they match the master assets exactly.

   Load this BEFORE any page stylesheet.
   ========================================================================== */

/* --- Brand typeface -------------------------------------------------------
   The logotype is a geometric grotesque; Figtree is the closest widely
   available match. Arial is the University's own fallback for Office
   templates, so it is the fallback here too and the pages stay on-brand
   if a kiosk has no network. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* ── Core palette (official) ────────────────────────────────────────── */
  --uoh-indigo:    #1A1464;   /* primary brand colour */
  --uoh-forest:    #003E2B;
  --uoh-mint:      #02DD96;
  --uoh-jade:      #00A674;
  --uoh-electric:  #2A33FF;
  --uoh-sky:       #8EBCE6;
  --uoh-butter:    #FDE580;
  --uoh-sun:       #F6D600;
  --uoh-gold:      #B59222;
  --uoh-orange:    #FF921E;
  --uoh-coral:     #FD622C;
  --uoh-plum:      #C36AB8;
  --uoh-magenta:   #C03369;
  --uoh-blush:     #FFCBDB;
  --uoh-peach:     #FDD191;
  --uoh-white:     #FFFFFF;

  /* Accessible shades of the palette, for rules and small text on light
     backgrounds where the parent colour falls below 4.5:1. Same hue, darker
     value — used only where the brand colour itself would be unreadable. */
  --uoh-gold-ink:  #6E5511;   /* shade of Gold   #B59222 */
  --uoh-coral-ink: #A03C08;   /* shade of Coral  #FD622C */
  --uoh-jade-ink:  #006B4B;   /* shade of Jade   #00A674 */

  /* ── Indigo surface scale ───────────────────────────────────────────── */
  --shell-deep:    #0B0833;   /* behind everything; media wells */
  --shell-dark:    #120E48;   /* side panels */
  --shell:         #1A1464;   /* brand indigo — main chrome */
  --shell-raised:  #241C82;   /* cards and rows on indigo */
  --shell-high:    #302798;   /* hover on indigo */

  /* ── Light canvas scale ─────────────────────────────────────────────── */
  --canvas:        #F1F1F8;   /* content area */
  --canvas-raised: #FFFFFF;
  --canvas-sunken: #E4E4F1;
  --canvas-line:   #D6D5E8;

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --ink:           #1A1464;   /* body text on light */
  --ink-soft:      #55527E;   /* secondary text on light */
  --ink-faint:     #8886A6;
  --on-shell:      #FFFFFF;   /* text on indigo */
  --on-shell-soft: #BDBADD;   /* secondary text on indigo */
  --on-shell-faint:#8E8ABC;

  /* ── Hairlines and veils over indigo ────────────────────────────────── */
  --veil-1:  rgba(255, 255, 255, 0.06);
  --veil-2:  rgba(255, 255, 255, 0.10);
  --veil-3:  rgba(255, 255, 255, 0.16);
  --rule:    rgba(255, 255, 255, 0.14);
  --rule-strong: rgba(255, 255, 255, 0.28);
  --shade-1: rgba(11, 8, 51, 0.30);
  --shade-2: rgba(11, 8, 51, 0.55);

  /* ── Section accents ─────────────────────────────────────────────────
     Each area of the interface takes one colour from the brand palette.
     Every set exposes five tokens:
       -fill    solid brand colour — active states, bars, filled pills
       -on-fill text colour that is legible on that fill (all >= 4.5:1)
       -bright  variant light enough for text and borders on indigo
       -ink     variant dark enough for rules and markers on the light canvas
       -tint    pale wash for backgrounds on the light canvas             */

  --general-fill:   var(--uoh-butter);
  --general-on:     #1A1464;
  --general-bright: var(--uoh-butter);
  --general-ink:    var(--uoh-gold-ink);
  --general-tint:   #FFF8DE;

  --cs-fill:   var(--uoh-electric);
  --cs-on:     #FFFFFF;
  --cs-bright: var(--uoh-sky);
  --cs-ink:    var(--uoh-electric);
  --cs-tint:   #E9EDFB;

  --eng-fill:   var(--uoh-mint);
  --eng-on:     #003E2B;
  --eng-bright: var(--uoh-mint);
  --eng-ink:    var(--uoh-jade-ink);
  --eng-tint:   #DFFBF0;

  --games-fill:   var(--uoh-orange);
  --games-on:     #1A1464;
  --games-bright: var(--uoh-orange);
  --games-ink:    var(--uoh-coral-ink);
  --games-tint:   #FFF0DC;

  --activities-fill:   var(--uoh-plum);
  --activities-on:     #1A1464;
  --activities-bright: var(--uoh-plum);
  --activities-ink:    var(--uoh-magenta);
  --activities-tint:   #F8EBF5;

  --map-fill:   var(--uoh-sky);
  --map-on:     #1A1464;
  --map-bright: var(--uoh-sky);
  --map-ink:    var(--uoh-electric);
  --map-tint:   #EAF2FA;

  --tour-fill:   var(--uoh-jade);
  --tour-on:     #003E2B;
  --tour-bright: var(--uoh-mint);
  --tour-ink:    var(--uoh-forest);
  --tour-tint:   #E0F4EE;

  --videos-fill:   var(--uoh-coral);
  --videos-on:     #1A1464;
  --videos-bright: var(--uoh-coral);
  --videos-ink:    var(--uoh-coral-ink);
  --videos-tint:   #FFEAE1;

  --news-fill:   var(--uoh-magenta);
  --news-on:     #FFFFFF;
  --news-bright: var(--uoh-blush);
  --news-ink:    var(--uoh-magenta);
  --news-tint:   #FBE8EF;

  /* Default accent set — swapped per section by the blocks below */
  --accent:        var(--general-fill);
  --accent-on:     var(--general-on);
  --accent-bright: var(--general-bright);
  --accent-ink:    var(--general-ink);
  --accent-tint:   var(--general-tint);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-brand: 'Figtree', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-num:   'Figtree', Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --tracking-tight: -0.02em;
  --tracking-flat:   0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.1em;

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --lift-1: 0 2px 6px rgba(11, 8, 51, 0.18);
  --lift-2: 0 8px 20px rgba(11, 8, 51, 0.22);
  --lift-3: 0 18px 44px rgba(11, 8, 51, 0.32);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 0.14s;
  --slow: 0.32s;
}

/* Per-section accent blocks. Any element carrying a data-category or
   data-ticker attribute re-points the accent tokens for its whole subtree,
   so tabs, the schedule panel, the content grid and the ticker all follow
   the active section without further wiring. */
[data-category="General"],
[data-ticker="General"] {
  --accent: var(--general-fill);
  --accent-on: var(--general-on);
  --accent-bright: var(--general-bright);
  --accent-ink: var(--general-ink);
  --accent-tint: var(--general-tint);
}
[data-category="Computer Science"],
[data-ticker="Computer Science"] {
  --accent: var(--cs-fill);
  --accent-on: var(--cs-on);
  --accent-bright: var(--cs-bright);
  --accent-ink: var(--cs-ink);
  --accent-tint: var(--cs-tint);
}
[data-category="Engineering"],
[data-ticker="Engineering"] {
  --accent: var(--eng-fill);
  --accent-on: var(--eng-on);
  --accent-bright: var(--eng-bright);
  --accent-ink: var(--eng-ink);
  --accent-tint: var(--eng-tint);
}
[data-category="Games"],
[data-ticker="Games"] {
  --accent: var(--games-fill);
  --accent-on: var(--games-on);
  --accent-bright: var(--games-bright);
  --accent-ink: var(--games-ink);
  --accent-tint: var(--games-tint);
}
[data-category="Activities"] {
  --accent: var(--activities-fill);
  --accent-on: var(--activities-on);
  --accent-bright: var(--activities-bright);
  --accent-ink: var(--activities-ink);
  --accent-tint: var(--activities-tint);
}
[data-category="Campus Map"] {
  --accent: var(--map-fill);
  --accent-on: var(--map-on);
  --accent-bright: var(--map-bright);
  --accent-ink: var(--map-ink);
  --accent-tint: var(--map-tint);
}
[data-category="Virtual Tour"] {
  --accent: var(--tour-fill);
  --accent-on: var(--tour-on);
  --accent-bright: var(--tour-bright);
  --accent-ink: var(--tour-ink);
  --accent-tint: var(--tour-tint);
}
[data-category="Videos"] {
  --accent: var(--videos-fill);
  --accent-on: var(--videos-on);
  --accent-bright: var(--videos-bright);
  --accent-ink: var(--videos-ink);
  --accent-tint: var(--videos-tint);
}
[data-category="News"] {
  --accent: var(--news-fill);
  --accent-on: var(--news-on);
  --accent-bright: var(--news-bright);
  --accent-ink: var(--news-ink);
  --accent-tint: var(--news-tint);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-brand);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numerals in schedules, clocks and counters must not jitter. */
.live-clock,
.clock,
.col-clock,
.timeline-time,
.time,
.time-badge,
.slot-time,
.schedule-time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

:focus-visible {
  outline: 3px solid var(--uoh-mint);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}