/* ═══════════════════════════════════════════════════════════════
   DR. HOSSAM SHEPL — Chemistry & Integrated Science Lab
   Design tokens: Lab teal · Copper flame · Sulfur amber · Glass
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Lab teal ramp (primary — glass, copper sulfate, deep lab) */
  --uk-navy-950: #031316;
  --uk-navy-900: #052226;
  --uk-navy-800: #0B5A63;
  --uk-navy-700: #0E7480;
  --uk-navy-600: #14919E;
  --uk-navy-500: #22A8B5;
  --uk-navy-400: #5BC5CF;
  --uk-navy-300: #9DDEE4;
  --uk-navy-200: #D0F0F3;
  --uk-navy-100: rgba(11, 90, 99, 0.10);
  --uk-navy-50:  rgba(11, 90, 99, 0.05);

  /* Copper / bunsen flame ramp (CTA, heat, reaction) */
  --uk-red-900: #7A2A08;
  --uk-red-800: #B84410;
  --uk-red-700: #E05A18;
  --uk-red-600: #F06E2E;
  --uk-red-500: #F58A52;
  --uk-red-400: #F8B08A;
  --uk-red-300: #FCD9C4;
  --uk-red-soft: rgba(224, 90, 24, 0.12);
  --uk-red-softer: rgba(224, 90, 24, 0.06);

  /* Sulfur / sodium-flame amber */
  --uk-gold-700: #8A6A0A;
  --uk-gold-600: #C49A12;
  --uk-gold-500: #E8B82A;
  --uk-gold-400: #F0D060;
  --uk-gold-300: #F7E6A8;
  --uk-gold-soft: rgba(232, 184, 42, 0.18);

  /* Lab glass / cool white surfaces */
  --uk-ivory-50: #FFFFFF;
  --uk-ivory-100: #F6FBFA;
  --uk-ivory-200: #EDF6F4;
  --uk-ivory-300: #DEEEEB;
  --uk-ivory-400: #C5DDD8;

  /* ─── Semantic tokens ─── */
  --page-bg: #EDF6F4;
  --page-bg-alt: #DEEEEB;
  --card-bg: #F6FBFA;
  --card: #F6FBFA;
  --card-bg-strong: #FFFFFF;
  --card-soft: #DEEEEB;

  --surface-soft: rgba(11, 90, 99, 0.05);
  --surface-strong: rgba(11, 90, 99, 0.09);
  --surface-highlight: rgba(11, 90, 99, 0.07);
  --surface-highlight-strong: rgba(224, 90, 24, 0.10);

  --text: #1A2E32;
  --text-strong: #052226;
  --muted: #5B7478;
  --muted-strong: #3D575C;

  --border: rgba(11, 90, 99, 0.13);
  --border-strong: rgba(11, 90, 99, 0.30);
  --brand-border: var(--border);
  --gold-border: rgba(232, 184, 42, 0.50);
  --red-border: rgba(224, 90, 24, 0.35);

  --shadow: 0 14px 34px rgba(5, 34, 38, 0.11);
  --shadow-soft: 0 4px 16px rgba(5, 34, 38, 0.07);
  --shadow-strong: 0 26px 60px rgba(5, 34, 38, 0.16);
  --shadow-navy: 0 10px 28px rgba(11, 90, 99, 0.24);
  --shadow-red: 0 10px 28px rgba(224, 90, 24, 0.26);
  --shadow-gold: 0 8px 24px rgba(232, 184, 42, 0.24);

  --primary: #0B5A63;
  --primary-strong: #052226;
  --primary-weak: rgba(11, 90, 99, 0.10);

  --field-bg: #FFFFFF;
  --field-text: var(--text);
  --field-border: rgba(11, 90, 99, 0.18);

  --btn-solid-bg: linear-gradient(135deg, #052226 0%, #0B5A63 55%, #0E7480 100%);
  --btn-solid-text: #FFFFFF;
  --btn-red-bg: linear-gradient(135deg, #B84410 0%, #E05A18 55%, #F06E2E 100%);
  --btn-red-text: #FFFFFF;
  --btn-gold-bg: linear-gradient(135deg, #C49A12 0%, #E8B82A 50%, #F0D060 100%);
  --btn-gold-text: #052226;

  --success: #157A4B;
  --danger: #E05A18;
  --warning: #C49A12;
  --success-soft-bg: rgba(21, 122, 75, 0.11);
  --success-soft-border: rgba(21, 122, 75, 0.36);
  --danger-soft-bg: rgba(224, 90, 24, 0.11);
  --danger-soft-border: rgba(224, 90, 24, 0.36);
  --warning-soft-bg: rgba(232, 184, 42, 0.14);
  --warning-soft-border: rgba(232, 184, 42, 0.40);

  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --sw-bg: #D0F0F3;
  --sw-knob: #0B5A63;

  --hdr-bg: #FFFFFF;
  --hdr-text: #052226;
  --hdr-border: rgba(11, 90, 99, 0.14);
  --hdr-fade: transparent;

  --grid-line: rgba(11, 90, 99, 0.06);
  --page-glow-1: rgba(11, 90, 99, 0.08);
  --page-glow-2: rgba(224, 90, 24, 0.07);

  --grad-navy: linear-gradient(135deg, #052226, #0B5A63 60%, #0E7480);
  --grad-red: linear-gradient(135deg, #B84410, #E05A18 60%, #F06E2E);
  --grad-gold: linear-gradient(135deg, #C49A12, #F0D060);
  --grad-hero: linear-gradient(155deg, #FFFFFF 0%, #EDF6F4 55%, #DEEEEB 100%);
  --grad-union: linear-gradient(135deg, #0B5A63 0%, #0E7480 38%, #E8B82A 38%, #E8B82A 46%, #E05A18 46%, #E05A18 62%, #E8B82A 62%, #E8B82A 70%, #0B5A63 70%);

  /* ─── Typography ───
     Latin glyphs: Syne (display) + Outfit (UI).
     Arabic falls through to Cairo automatically. */
  --font-display: 'Syne', 'Cairo', system-ui, sans-serif;
  --font-ui: 'Outfit', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-body: 'Cairo', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-script: 'Outfit', 'Cairo', system-ui, sans-serif;
  --font-calli: var(--font-display);
  --font-mono: 'JetBrains 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 — hex / bond */
  --uk-stripe: repeating-linear-gradient(
    135deg,
    #0B5A63 0 14px,
    #FFFFFF 14px 20px,
    #E05A18 20px 34px,
    #E8B82A 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='%230B5A63'/%3E%3Crect width='20' height='4' x='26' y='2' rx='2' fill='%23E05A18'/%3E%3C/svg%3E");
  --uk-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpath d='M42 1.5 82 24.5v46L42 93.5 2 70.5v-46Z' fill='none' stroke='%230B5A63' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");

  color-scheme: light;
}

html[data-theme="dark"] {
  --uk-navy-800: #8FE0E8;
  --uk-navy-700: #B4EDF2;
  --uk-navy-600: #D2F4F7;
  --uk-navy-400: #E8FAFB;
  --uk-navy-300: #E8FAFB;
  --uk-navy-200: #F4FCFD;
  --uk-navy-100: rgba(91, 197, 207, 0.18);
  --uk-navy-50:  rgba(91, 197, 207, 0.10);

  --uk-red-700: #FFB088;
  --uk-red-600: #FFC9A8;
  --uk-red-soft: rgba(255, 160, 110, 0.18);
  --uk-red-softer: rgba(255, 160, 110, 0.10);

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

  --page-bg: #051114;
  --page-bg-alt: #081A1E;
  --card-bg: #0C2328;
  --card: #0C2328;
  --card-bg-strong: #123038;
  --card-soft: #081A1E;

  --surface-soft: rgba(255, 255, 255, 0.08);
  --surface-strong: rgba(255, 255, 255, 0.13);
  --surface-highlight: rgba(91, 197, 207, 0.16);
  --surface-highlight-strong: rgba(255, 160, 110, 0.16);

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

  --border: rgba(208, 240, 243, 0.22);
  --border-strong: rgba(91, 197, 207, 0.42);
  --gold-border: rgba(240, 208, 96, 0.48);
  --red-border: rgba(255, 160, 110, 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: #8FE0E8;
  --primary-strong: #FFFFFF;
  --primary-weak: rgba(91, 197, 207, 0.18);

  --field-bg: #081A1E;
  --field-text: #FFFFFF;
  --field-border: rgba(208, 240, 243, 0.32);

  --btn-solid-bg: linear-gradient(135deg, #0B5A63 0%, #14919E 100%);
  --btn-solid-text: #FFFFFF;
  --btn-red-bg: linear-gradient(135deg, #E05A18 0%, #F58A52 100%);
  --btn-gold-text: #031316;

  --success: #7CF0A4;
  --danger: #FFB088;
  --warning: #F0D98A;
  --success-soft-bg: rgba(124, 240, 164, 0.16);
  --danger-soft-bg: rgba(255, 176, 136, 0.16);

  --hdr-bg: #081A1E;
  --hdr-text: #FFFFFF;
  --hdr-border: rgba(91, 197, 207, 0.28);

  --grid-line: rgba(208, 240, 243, 0.08);
  --page-glow-1: transparent;
  --page-glow-2: transparent;

  --grad-hero: linear-gradient(155deg, #081A1E 0%, #051114 100%);

  --sw-bg: #081A1E;
  --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 chemistry 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(--uk-hex) 0 0 / 84px 97px,
    var(--page-bg);
}

html[data-theme="dark"] body.uk-platform {
  background: var(--uk-hex) 0 0 / 84px 97px, 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-navy-800); color: #fff; }

img { max-width: 100%; }

/* ═══ Lab 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 38%,
    var(--uk-gold-500) 38% 52%,
    var(--uk-red-700) 52% 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-gold-500) 33.3% 50%,
    var(--uk-red-700) 50% 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(11, 90, 99, 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(224, 90, 24, 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;
  }
}