/* ════════════════════════════════════════════════════════════════
   ALC AFRICAN DATA LAB — DESIGN TOKENS
   Colours extracted from ALC + King's College London logo
   ALC Orange: #CF7542  |  ALC Black: #000000  |  KCL Red: #BE2034
   ════════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ───────────────────────────────────── */
:root {
  /* === ALC Logo Palette ======================================= */
  --alc-black:    #000000;   /* ALC logo background — pure black  */
  --alc-orange:   #CF7542;   /* "African Leadership Centre" text  */
  --alc-orange-dk:#A85A32;   /* Darker orange for hover           */
  --alc-sil-1:    #603020;   /* Silhouette darkest — mahogany     */
  --alc-sil-2:    #B15042;   /* Silhouette 2 — terracotta         */
  --alc-sil-3:    #C97647;   /* Silhouette 3 — warm orange        */
  --alc-sil-4:    #D5733E;   /* Silhouette lightest               */
  --kcl-red:      #BE2034;   /* King's College London red         */
  --kcl-red-dk:   #9E1A28;   /* KCL red hover                     */

  /* === Semantic colours ======================================= */
  --navy:      #000000;   /* Page nav — ALC black                 */
  --brand:     #7A3820;   /* Brand dark — ALC mahogany            */
  --accent:    #CF7542;   /* Primary interactive — ALC orange     */
  --accent-dk: #A85A32;   /* Accent hover                         */
  --gold:      #D5733E;   /* Warmth / highlights                  */
  --gold-lt:   #F5A86A;   /* Light gold                           */

  /* Status colours */
  --success:   #2D6A4F;   /* Earthy green                         */
  --danger:    #BE2034;   /* KCL red — errors / danger            */
  --warning:   #B5830A;   /* Warm amber                           */
  --info:      #CF7542;   /* Use orange for info in this palette  */

  /* === Backgrounds — warm to match ALC earthy palette ======== */
  --bg:        #FAF4EE;   /* Warm off-white (was cold #F0F4F8)    */
  --bg-subtle: #F5ECE3;   /* Slightly deeper warm                  */
  --surface:   #FFFFFF;
  --white:     #FFFFFF;

  /* === Borders — warm tones ================================== */
  --border:    #E8D8CC;   /* Warm border (was cold #E2E8F0)       */
  --border-dk: #D4BFB0;   /* Dark warm border (was #CBD5E1)       */

  /* === Text — warm dark ====================================== */
  --text:      #1A0C06;   /* Warm near-black (was cold #0F172A)   */
  --muted:     #6B5548;   /* Warm muted (was cold #64748B)        */
  --muted-lt:  #9E8070;   /* Light warm muted (was #94A3B8)       */

  /* === Typography ============================================ */
  --ff-head:   'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body:   'DM Sans', system-ui, sans-serif;
  --ff-mono:   'JetBrains Mono', monospace;

  /* === Shape ================================================= */
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* === Bootstrap overrides (applied via :root) =============== */
  --bs-primary:       #CF7542;
  --bs-primary-rgb:   207, 117, 66;
  --bs-body-font-family: var(--ff-body);
  --bs-body-bg:       #FAF4EE;
  --bs-body-color:    #1A0C06;
  --bs-border-radius: 8px;
  --bs-link-color:    #CF7542;
  --bs-link-hover-color: #A85A32;
  --bs-success:       #2D6A4F;
  --bs-danger:        #BE2034;
  --bs-warning:       #B5830A;
}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #100800;   /* Very warm black                      */
  --bg-subtle: #1C1008;   /* Slightly lighter warm dark           */
  --surface:   #241508;   /* Warm dark surface                    */
  --border:    rgba(207,117,66,.12);   /* Orange-tinted border    */
  --border-dk: rgba(207,117,66,.22);  /* Stronger orange border   */
  --text:      #F5EDE4;   /* Warm off-white text                  */
  --muted:     #C0A090;   /* Warm muted (readable in dark)        */
  --muted-lt:  #9E8070;   /* Lighter warm muted                   */
  --accent:    #E08A55;   /* Slightly lighter orange in dark      */
  --gold:      #F5A86A;   /* Lighter gold in dark                 */
  --success:   #4ADE80;   /* Brighter green in dark               */
}

/* ── OS dark preference fallback ───────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:        #100800;
    --bg-subtle: #1C1008;
    --surface:   #241508;
    --border:    rgba(207,117,66,.12);
    --border-dk: rgba(207,117,66,.22);
    --text:      #F5EDE4;
    --muted:     #C0A090;
    --muted-lt:  #9E8070;
    --accent:    #E08A55;
    --gold:      #F5A86A;
  }
}