/* ═══════════════════════════════════════════════════════════════
   MR. MOAMEN ELSHENNAWY — HEROES Academy
   Design tokens: Union navy · Union red · Ivory · Royal gold
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Union Jack navy ramp (Pantone 280 family) */
  --uk-navy-950: #00102E;
  --uk-navy-900: #001543;
  --uk-navy-800: #012169;
  --uk-navy-700: #123284;
  --uk-navy-600: #2A4BA8;
  --uk-navy-500: #4E6DC4;
  --uk-navy-400: #8296DA;
  --uk-navy-300: #B9C5EC;
  --uk-navy-200: #DCE3F7;
  --uk-navy-100: rgba(1, 33, 105, 0.10);
  --uk-navy-50:  rgba(1, 33, 105, 0.05);

  /* Union Jack red ramp (Pantone 186 family) */
  --uk-red-900: #7A0A1B;
  --uk-red-800: #A00D24;
  --uk-red-700: #C8102C;
  --uk-red-600: #DE2440;
  --uk-red-500: #EC5266;
  --uk-red-400: #F58A98;
  --uk-red-300: #FBC3CC;
  --uk-red-soft: rgba(200, 16, 44, 0.12);
  --uk-red-softer: rgba(200, 16, 44, 0.06);

  /* Royal gold — awards, crowns, final year */
  --uk-gold-700: #8C6D14;
  --uk-gold-600: #A8851C;
  --uk-gold-500: #C9A227;
  --uk-gold-400: #DFBE55;
  --uk-gold-300: #F0DA9B;
  --uk-gold-soft: rgba(201, 162, 39, 0.18);

  /* Ivory / parchment surfaces */
  --uk-ivory-50: #FFFFFF;
  --uk-ivory-100: #FDFCFA;
  --uk-ivory-200: #F8F6F1;
  --uk-ivory-300: #F1EDE4;
  --uk-ivory-400: #E4DED1;

  /* ─── Semantic tokens ─── */
  --page-bg: #F8F6F1;
  --page-bg-alt: #F1EDE4;
  --card-bg: #FDFCFA;
  --card: #FDFCFA;
  --card-bg-strong: #FFFFFF;
  --card-soft: #F1EDE4;

  --surface-soft: rgba(1, 33, 105, 0.05);
  --surface-strong: rgba(1, 33, 105, 0.09);
  --surface-highlight: rgba(1, 33, 105, 0.07);
  --surface-highlight-strong: rgba(200, 16, 44, 0.10);

  --text: #1E2A44;
  --text-strong: #001543;
  --muted: #64748B;
  --muted-strong: #45536E;

  --border: rgba(1, 33, 105, 0.13);
  --border-strong: rgba(1, 33, 105, 0.30);
  --brand-border: var(--border);
  --gold-border: rgba(201, 162, 39, 0.50);
  --red-border: rgba(200, 16, 44, 0.35);

  --shadow: 0 14px 34px rgba(0, 21, 67, 0.11);
  --shadow-soft: 0 4px 16px rgba(0, 21, 67, 0.07);
  --shadow-strong: 0 26px 60px rgba(0, 21, 67, 0.16);
  --shadow-navy: 0 10px 28px rgba(1, 33, 105, 0.24);
  --shadow-red: 0 10px 28px rgba(200, 16, 44, 0.26);
  --shadow-gold: 0 8px 24px rgba(201, 162, 39, 0.24);

  --primary: #012169;
  --primary-strong: #001543;
  --primary-weak: rgba(1, 33, 105, 0.10);

  --field-bg: #FFFFFF;
  --field-text: var(--text);
  --field-border: rgba(1, 33, 105, 0.18);

  --btn-solid-bg: linear-gradient(135deg, #001543 0%, #012169 55%, #123284 100%);
  --btn-solid-text: #FFFFFF;
  --btn-red-bg: linear-gradient(135deg, #A00D24 0%, #C8102C 55%, #DE2440 100%);
  --btn-red-text: #FFFFFF;
  --btn-gold-bg: linear-gradient(135deg, #A8851C 0%, #C9A227 50%, #DFBE55 100%);
  --btn-gold-text: #001543;

  --success: #157347;
  --danger: #C8102C;
  --warning: #A8851C;
  --success-soft-bg: rgba(21, 115, 71, 0.11);
  --success-soft-border: rgba(21, 115, 71, 0.36);
  --danger-soft-bg: rgba(200, 16, 44, 0.11);
  --danger-soft-border: rgba(200, 16, 44, 0.36);
  --warning-soft-bg: rgba(201, 162, 39, 0.14);
  --warning-soft-border: rgba(201, 162, 39, 0.40);

  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --sw-bg: #DCE3F7;
  --sw-knob: #012169;

  --hdr-bg: #FFFFFF;
  --hdr-text: #001543;
  --hdr-border: rgba(1, 33, 105, 0.14);
  --hdr-fade: transparent;

  --grid-line: rgba(1, 33, 105, 0.06);
  --page-glow-1: rgba(1, 33, 105, 0.07);
  --page-glow-2: rgba(200, 16, 44, 0.06);

  --grad-navy: linear-gradient(135deg, #001543, #012169 60%, #123284);
  --grad-red: linear-gradient(135deg, #A00D24, #C8102C 60%, #DE2440);
  --grad-gold: linear-gradient(135deg, #A8851C, #DFBE55);
  --grad-hero: linear-gradient(155deg, #FFFFFF 0%, #F8F6F1 55%, #F1EDE4 100%);
  --grad-union: linear-gradient(135deg, #012169 0%, #012169 34%, #FFFFFF 34%, #FFFFFF 44%, #C8102C 44%, #C8102C 56%, #FFFFFF 56%, #FFFFFF 66%, #012169 66%);

  /* ─── Typography ───
     Latin glyphs resolve to the English families, Arabic glyphs fall
     through to Cairo automatically because the serif faces carry no
     Arabic coverage. */
  --font-display: 'Playfair Display', 'Cairo', Georgia, 'Times New Roman', serif;
  --font-ui: 'Outfit', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-body: 'Cairo', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;
  --font-calli: var(--font-display);
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --studio-sidebar-w: 264px;
  --studio-header-h: 68px;

  /* Decorative repeating rules */
  --uk-stripe: repeating-linear-gradient(
    135deg,
    #012169 0 14px,
    #FFFFFF 14px 20px,
    #C8102C 20px 34px,
    #FFFFFF 34px 40px
  );
  --uk-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Crect width='20' height='4' y='2' rx='2' fill='%23012169'/%3E%3Crect width='20' height='4' x='26' y='2' rx='2' fill='%23C8102C'/%3E%3C/svg%3E");

  color-scheme: light;
}

html[data-theme="dark"] {
  --uk-navy-800: #C5D2F8;
  --uk-navy-700: #D7E1FB;
  --uk-navy-600: #E4EBFC;
  --uk-navy-400: #F0F4FF;
  --uk-navy-300: #F0F4FF;
  --uk-navy-200: #F7F9FF;
  --uk-navy-100: rgba(155, 176, 240, 0.18);
  --uk-navy-50:  rgba(155, 176, 240, 0.10);

  --uk-red-700: #FFB3BC;
  --uk-red-600: #FFC9CF;
  --uk-red-soft: rgba(255, 138, 152, 0.18);
  --uk-red-softer: rgba(255, 138, 152, 0.10);

  --uk-gold-700: #FFE8B0;
  --uk-gold-600: #FFDF8A;
  --uk-gold-500: #F6D056;
  --uk-gold-400: #FFE08A;

  --page-bg: #060F26;
  --page-bg-alt: #0A1836;
  --card-bg: #0E1E42;
  --card: #0E1E42;
  --card-bg-strong: #132650;
  --card-soft: #0A1836;

  --surface-soft: rgba(255, 255, 255, 0.08);
  --surface-strong: rgba(255, 255, 255, 0.13);
  --surface-highlight: rgba(155, 176, 240, 0.16);
  --surface-highlight-strong: rgba(255, 138, 152, 0.16);

  --text: #FFFFFF;
  --text-strong: #FFFFFF;
  --muted: #FFFFFF;
  --muted-strong: #FFFFFF;

  --border: rgba(232, 238, 255, 0.22);
  --border-strong: rgba(155, 176, 240, 0.42);
  --gold-border: rgba(232, 201, 106, 0.48);
  --red-border: rgba(255, 138, 152, 0.42);

  --shadow: 0 16px 38px rgba(0, 0, 0, 0.50);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 28px 64px rgba(0, 0, 0, 0.60);
  --shadow-navy: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-red: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 8px 24px rgba(0, 0, 0, 0.40);

  --primary: #C6D2F6;
  --primary-strong: #FFFFFF;
  --primary-weak: rgba(155, 176, 240, 0.18);

  --field-bg: #0B1840;
  --field-text: #FFFFFF;
  --field-border: rgba(232, 238, 255, 0.32);

  --btn-solid-bg: linear-gradient(135deg, #012169 0%, #2A4BA8 100%);
  --btn-solid-text: #FFFFFF;
  --btn-red-bg: linear-gradient(135deg, #C8102C 0%, #EC5266 100%);
  --btn-gold-text: #00102E;

  --success: #7CF0A4;
  --danger: #FFA0AB;
  --warning: #F0D98A;
  --success-soft-bg: rgba(124, 240, 164, 0.16);
  --danger-soft-bg: rgba(255, 160, 171, 0.16);

  --hdr-bg: #0A1836;
  --hdr-text: #FFFFFF;
  --hdr-border: rgba(155, 176, 240, 0.28);

  --grid-line: rgba(232, 238, 255, 0.08);
  --page-glow-1: rgba(1, 33, 105, 0.55);
  --page-glow-2: rgba(200, 16, 44, 0.16);

  --grad-hero: linear-gradient(155deg, #0A1836 0%, #060F26 100%);

  --sw-bg: #0A1836;
  --sw-knob: #E8C96A;

  color-scheme: dark;
}

/* ─── Legacy token aliases ───
   The dashboard stylesheets still reference the previous theme's variable
   names; mapping them here keeps those pages on the British palette. */
:root,
html[data-theme="dark"] {
  --brand-950: var(--uk-navy-950);
  --brand-900: var(--uk-navy-900);
  --brand-800: var(--uk-navy-800);
  --brand-700: var(--uk-navy-700);
  --brand-600: var(--uk-navy-600);
  --brand-500: var(--uk-navy-500);
  --brand-400: var(--uk-navy-400);
  --brand-300: var(--uk-navy-300);
  --brand-100: var(--uk-navy-100);
  --brand-50: var(--uk-navy-50);
  --brand: var(--uk-navy-800);

  --gold-700: var(--uk-gold-700);
  --gold-600: var(--uk-gold-600);
  --gold-500: var(--uk-gold-500);
  --gold-400: var(--uk-gold-400);
  --gold-300: var(--uk-gold-300);
  --gold-soft: var(--uk-gold-soft);

  --accent: var(--uk-navy-800);
  --accent-soft: var(--uk-navy-100);
  --accent-violet: var(--uk-navy-800);
  --accent-cyan: var(--uk-navy-600);
  --accent-amber: var(--uk-gold-500);
  --accent-green: var(--success);
  --accent-gold: var(--uk-gold-500);
  --accent-red: var(--uk-red-700);

  --insight: var(--uk-navy-800);
  --insight-strong: var(--uk-navy-900);
  --insight-soft: var(--uk-navy-100);

  --grad-brand: var(--grad-navy);
  --greek-key: var(--uk-dash);
  --greek-key-dark: var(--uk-dash);
}

html[data-theme="dark"] {
  --insight: var(--text);
  --insight-strong: var(--text-strong);
}

/* ═══ Base ═══ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
  background: var(--page-bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

body.uk-platform {
  background:
    radial-gradient(ellipse 60% 45% at 100% 0%, var(--page-glow-1), transparent 58%),
    radial-gradient(ellipse 50% 40% at 0% 12%, var(--page-glow-2), transparent 54%),
    var(--page-bg);
}

/* The old themes painted grids and glows through body pseudo-elements. */
body::before,
body::after { content: none !important; display: none !important; }

.container,
.uk-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}

a { color: var(--uk-navy-800); text-decoration: none; }
html[data-theme="dark"] a { color: var(--uk-navy-400); }

::selection { background: var(--uk-red-700); color: #fff; }

img { max-width: 100%; }

/* ═══ Union Jack decorative primitives ═══ */

.uk-rule {
  display: block;
  width: 132px;
  height: 6px;
  margin: 18px auto 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    var(--uk-navy-800) 0 42%,
    var(--card-bg-strong) 42% 58%,
    var(--uk-red-700) 58% 100%
  );
}

.uk-rule--start { margin-inline: 0 auto; }

.uk-flagline {
  display: block;
  height: 6px;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--uk-navy-800) 0 33.3%,
    var(--uk-red-700) 33.3% 66.6%,
    var(--uk-navy-800) 66.6% 100%
  );
}

/* ═══ Buttons ═══ */

.uk-btn {
  --_bg: var(--btn-solid-bg);
  --_fg: var(--btn-solid-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.uk-btn:hover { transform: translateY(-2px); }
.uk-btn:active { transform: translateY(0); }
.uk-btn:focus-visible { outline: 3px solid var(--uk-navy-400); outline-offset: 2px; }

.uk-btn--navy { box-shadow: var(--shadow-navy); }
.uk-btn--navy:hover { box-shadow: 0 14px 34px rgba(1, 33, 105, 0.34); }

.uk-btn--red {
  --_bg: var(--btn-red-bg);
  --_fg: var(--btn-red-text);
  box-shadow: var(--shadow-red);
}
.uk-btn--red:hover { box-shadow: 0 14px 34px rgba(200, 16, 44, 0.36); }

.uk-btn--gold {
  --_bg: var(--btn-gold-bg);
  --_fg: var(--btn-gold-text);
  box-shadow: var(--shadow-gold);
}

.uk-btn--outline {
  --_bg: transparent;
  --_fg: var(--uk-navy-800);
  border-color: var(--border-strong);
}
.uk-btn--outline:hover {
  --_bg: var(--uk-navy-100);
  border-color: var(--uk-navy-800);
}
html[data-theme="dark"] .uk-btn--outline { --_fg: var(--text); }

.uk-btn--ghost {
  --_bg: transparent;
  --_fg: var(--text-strong);
  border-color: transparent;
}
.uk-btn--ghost:hover { --_bg: var(--surface-soft); }

.uk-btn--onDark {
  --_bg: rgba(255, 255, 255, 0.10);
  --_fg: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(6px);
}
.uk-btn--onDark:hover { --_bg: rgba(255, 255, 255, 0.20); border-color: #fff; }

.uk-btn--white {
  --_bg: #fff;
  --_fg: var(--uk-navy-900);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.uk-btn--lg { padding: 16px 32px; font-size: 16.5px; }
.uk-btn--sm { padding: 9px 16px; font-size: 13.5px; }
.uk-btn--block { width: 100%; }

/* ═══ Form fields ═══ */

.uk-input,
.input,
.input2,
.ui-input,
.ui-select,
select.input,
textarea.input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--field-text);
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.uk-input:focus,
.input:focus,
.input2:focus,
.ui-input:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--uk-navy-800);
  box-shadow: 0 0 0 4px var(--uk-navy-100);
}

.uk-input::placeholder,
.input::placeholder { color: var(--muted); font-weight: 500; }

/* ═══ Cards & logo ═══ */

.card,
.uk-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.platform-logo__img--light { display: block; }
.platform-logo__img--dark { display: none; }
html[data-theme="dark"] .platform-logo__img--light { display: none; }
html[data-theme="dark"] .platform-logo__img--dark { display: block; }

body.student-lite { padding-top: 0; }

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