/* ============================================================================
   Oxford English Centre — Design System Core (app.css)
   Premium Educational Platform — Design Tokens, Reset, Base Typography
   Loaded globally. Self-contained: does NOT depend on Bootstrap grid.
   ============================================================================ */

:root {
    /* ---- Brand Colors ---- */
    --ox-primary:        #0F4C81;
    --ox-primary-600:    #0d4373;
    --ox-primary-700:    #0a3258;
    --ox-primary-800:    #082742;
    --ox-primary-050:    #e7eef5;

    --ox-secondary:      #2C9AB7;
    --ox-secondary-600:  #2587a1;
    --ox-secondary-050:  #e6f3f7;

    --ox-accent:         #F7B733;
    --ox-accent-600:     #e0a31f;
    --ox-accent-050:     #fef6e4;

    --ox-success:        #22C55E;
    --ox-warning:        #F59E0B;
    --ox-danger:         #EF4444;
    --ox-info:           #2C9AB7;

    /* ---- Neutral Gray Scale ---- */
    --ox-white:   #ffffff;
    --ox-gray-50:  #f8fafc;
    --ox-gray-100: #f1f5f9;
    --ox-gray-200: #e2e8f0;
    --ox-gray-300: #cbd5e1;
    --ox-gray-400: #94a3b8;
    --ox-gray-500: #64748b;
    --ox-gray-600: #475569;
    --ox-gray-700: #334155;
    --ox-gray-800: #1e293b;
    --ox-gray-900: #0f172a;
    --ox-black:   #060b14;

    /* ---- Semantic ---- */
    --ox-bg:          var(--ox-white);
    --ox-bg-soft:     var(--ox-gray-50);
    --ox-bg-muted:    var(--ox-gray-100);
    --ox-text:        var(--ox-gray-800);
    --ox-text-soft:   var(--ox-gray-500);
    --ox-heading:     var(--ox-primary-700);
    --ox-border:      var(--ox-gray-200);

    /* ---- Gradients ---- */
    --ox-gradient-brand:   linear-gradient(135deg, var(--ox-primary) 0%, var(--ox-secondary) 100%);
    --ox-gradient-deep:    linear-gradient(135deg, var(--ox-primary-800) 0%, var(--ox-primary) 55%, var(--ox-secondary) 100%);
    --ox-gradient-accent:  linear-gradient(135deg, var(--ox-accent) 0%, #f9912b 100%);
    --ox-gradient-sheen:   linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 70%);

    /* ---- Typography ---- */
    --ox-font-en:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --ox-font-ar:      'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
    --ox-font-body:    var(--ox-font-en);
    --ox-font-head:    var(--ox-font-en);

    /* Scale tuned for an academic, highly readable platform (root = 16px) */
    --ox-fs-xs:    0.8125rem;  /* 13 */
    --ox-fs-sm:    0.9375rem;  /* 15 */
    --ox-fs-base:  1.125rem;   /* 18  body */
    --ox-fs-nav:   1.0625rem;  /* 17  navigation */
    --ox-fs-lg:    1.25rem;    /* 20  lead / cards */
    --ox-fs-xl:    1.5rem;     /* 24  H4 */
    --ox-fs-2xl:   1.875rem;   /* 30  H3 */
    --ox-fs-3xl:   2.625rem;   /* 42  H2 */
    --ox-fs-4xl:   3.5rem;     /* 56  H1 */
    --ox-fs-5xl:   clamp(2.75rem, 3vw + 2rem, 4rem); /* 44 → 64 hero */

    --ox-lh-tight: 1.12;
    --ox-lh-snug:  1.3;
    --ox-lh-base:  1.75;

    /* ---- Spacing Scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ---- */
    --ox-s-1:  4px;
    --ox-s-2:  8px;
    --ox-s-3:  12px;
    --ox-s-4:  16px;
    --ox-s-6:  24px;
    --ox-s-8:  32px;
    --ox-s-12: 48px;
    --ox-s-16: 64px;
    --ox-s-24: 96px;

    /* ---- Radius ---- */
    --ox-radius-sm:  8px;
    --ox-radius:     14px;
    --ox-radius-lg:  22px;
    --ox-radius-xl:  32px;
    --ox-radius-pill: 999px;

    /* ---- Shadows (soft, layered) ---- */
    --ox-shadow-xs:  0 1px 2px rgba(15,76,129,.06);
    --ox-shadow-sm:  0 2px 8px rgba(15,76,129,.08);
    --ox-shadow:     0 10px 30px -8px rgba(15,76,129,.18);
    --ox-shadow-lg:  0 24px 60px -16px rgba(15,76,129,.28);
    --ox-shadow-glow: 0 0 0 1px rgba(44,154,183,.25), 0 12px 40px -8px rgba(44,154,183,.45);

    /* ---- Glass ---- */
    --ox-glass-bg:     rgba(255,255,255,.10);
    --ox-glass-border: rgba(255,255,255,.22);
    --ox-glass-blur:   16px;

    /* ---- Motion ---- */
    --ox-ease:        cubic-bezier(.22,.61,.36,1);
    --ox-ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ox-dur-fast:    .18s;
    --ox-dur:         .32s;
    --ox-dur-slow:    .6s;

    --ox-container:   1240px;
    --ox-header-h:    88px;
}

/* ---- Arabic / RTL font switch ---- */
html[lang="ar"], [dir="rtl"] {
    --ox-font-body: var(--ox-font-ar);
    --ox-font-head: var(--ox-font-ar);
}

/* ============================================================================
   Dashboard Shell Palette (student & teacher portals) — additive.
   Requested navy/gold palette kept verbatim, plus a parallel light set.
   Semantic --d-* tokens are read by the shell AND inherited by AJAX-injected
   fragments, so no inline styles are ever required.
   ============================================================================ */
:root {
    /* requested dark palette (verbatim) */
    --bg-primary:   #0B1D3A;
    --bg-secondary: #0E2250;
    --bg-card:      #162B5E;
    --gold-dark:    #C8992A;
    --gold-mid:     #E8B84B;
    --gold-light:   #F5D078;
    --text-white:   #FFFFFF;
    --text-gold:    #D4A017;
    --text-muted:   #B8C8E0;
    --btn-bg:       #1A3A6E;
    --btn-border:   #2A5298;

    /* shell metrics */
    --d-sidebar-w:      264px;
    --d-sidebar-w-min:  78px;
    --d-header-h:       66px;
    --d-topmenu-h:      58px;
}

/* DARK theme (default) */
.ox-dash[data-dash-theme="dark"] {
    --d-bg:            var(--bg-primary);
    --d-sidebar:       var(--bg-secondary);
    --d-header:        var(--bg-secondary);
    --d-topmenu:       var(--bg-primary);
    --d-card:          var(--bg-card);
    --d-card-2:        #1b3268;
    --d-border:        var(--btn-border);
    --d-text:          var(--text-white);
    --d-heading:       var(--text-white);
    --d-muted:         var(--text-muted);
    --d-active-bg:     var(--btn-bg);
    --d-active-border: var(--gold-dark);
    --d-accent:        var(--text-gold);
    --d-accent-grad:   linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-mid) 100%);
    --d-hover:         rgba(255,255,255,.06);
    --d-input-bg:      #0d2247;
    --d-shadow:        0 14px 40px -16px rgba(0,0,0,.55);
    color-scheme: dark;

    /* sidebar (navy in dark) */
    --side-bg:          var(--bg-secondary);
    --side-border:      var(--btn-border);
    --side-text:        #cdd9ef;
    --side-muted:       #9fb3d6;
    --side-label:       var(--text-muted);
    --side-hover:       rgba(255,255,255,.06);
    --side-active-bg:   var(--btn-bg);
    --side-active-text: #ffffff;
    --side-active-icon: var(--gold-mid);
    --side-logout:      #f3b1b1;
    --side-scroll:      rgba(255,255,255,.14);

    /* semantic aliases (used by AJAX-injected content + component classes) */
    --surface:        var(--d-card);
    --surface-2:      var(--d-card-2);
    --surface-hover:  var(--d-active-bg);
    --border-color:   var(--d-border);
    --text-primary:   var(--d-text);
    --text-secondary: var(--d-muted);
    /* status colors (theme-aware) */
    --c-success:      #22C55E;
    --c-success-bg:   rgba(34,197,94,.15);
    --c-warning:      var(--gold-mid);
    --c-warning-bg:   rgba(232,184,75,.15);
    --c-danger:       #FF6B6B;
    --c-danger-bg:    rgba(255,107,107,.15);
    --c-info:         var(--d-muted);
    --c-info-bg:      rgba(42,82,152,.3);
    /* chart palette */
    --chart-1: var(--gold-mid);
    --chart-2: #22C55E;
    --chart-3: #FF6B6B;
    --chart-4: #3B82F6;
    --chart-5: #A855F7;
    --chart-grid:  var(--d-border);
    --chart-label: var(--d-muted);
}

/* LIGHT theme */
.ox-dash[data-dash-theme="light"] {
    --d-bg:            #f4f6fb;
    --d-sidebar:       #0E2250;   /* brand navy sidebar in both modes */
    --d-header:        #0E2250;   /* navy header in both modes (keeps logo + contrast) */
    --d-topmenu:       #ffffff;
    --d-card:          #ffffff;
    --d-card-2:        #f8fafc;
    --d-border:        #e2e8f0;
    --d-text:          #1e293b;
    --d-heading:       #0a3258;
    --d-muted:         #64748b;
    --d-active-bg:     rgba(255,255,255,.10);
    --d-active-border: var(--gold-dark);
    --d-accent:        var(--gold-dark);
    --d-accent-grad:   linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-mid) 100%);
    --d-hover:         rgba(255,255,255,.07);
    --d-input-bg:      #ffffff;
    --d-shadow:        0 14px 40px -18px rgba(15,76,129,.22);
    color-scheme: light;

    /* sidebar (white in light) */
    --side-bg:          #ffffff;
    --side-border:      #e6eaf2;
    --side-text:        #000000;
    --side-muted:       #64748b;
    --side-label:       #94a3b8;
    --side-hover:       rgba(15,76,129,.06);
    --side-active-bg:   rgba(200,153,42,.14);
    --side-active-text: #0a3258;
    --side-active-icon: var(--gold-dark);
    --side-logout:      #dc2626;
    --side-scroll:      rgba(15,23,42,.18);

    /* semantic aliases (used by AJAX-injected content + component classes) */
    --surface:        var(--d-card);
    --surface-2:      var(--d-card-2);
    --surface-hover:  var(--d-active-bg);
    --border-color:   var(--d-border);
    --text-primary:   var(--d-text);
    --text-secondary: var(--d-muted);
    /* status colors (theme-aware) */
    --c-success:      #16A34A;
    --c-success-bg:   rgba(22,163,74,.12);
    --c-warning:      var(--gold-dark);
    --c-warning-bg:   rgba(200,153,42,.14);
    --c-danger:       #DC2626;
    --c-danger-bg:    rgba(220,38,38,.10);
    --c-info:         #2563EB;
    --c-info-bg:      rgba(37,99,235,.10);
    /* chart palette */
    --chart-1: var(--gold-dark);
    --chart-2: #16A34A;
    --chart-3: #DC2626;
    --chart-4: #2563EB;
    --chart-5: #9333EA;
    --chart-grid:  var(--d-border);
    --chart-label: var(--d-muted);
}

/* ============================================================================
   Gentle, scoped base — applied to the redesigned shell. Kept minimal so it
   does not disturb legacy Bootstrap-3 page bodies.
   ============================================================================ */

.ox-scope, .ox-scope *, .ox-scope *::before, .ox-scope *::after,
.ox-header, .ox-header *, .ox-header *::before, .ox-header *::after,
.ox-footer, .ox-footer *, .ox-footer *::before, .ox-footer *::after,
.ox-drawer, .ox-drawer *, .ox-backdrop, .ox-totop { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ox-font-body);
}

.ox-scope {
    color: var(--ox-text);
    font-family: var(--ox-font-body);
    font-size: var(--ox-fs-base);
    line-height: var(--ox-lh-base);
    background: var(--ox-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ox-scope h1, .ox-scope h2, .ox-scope h3,
.ox-scope h4, .ox-scope h5, .ox-scope h6 {
    font-family: var(--ox-font-head);
    color: var(--ox-heading);
    line-height: var(--ox-lh-tight);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 var(--ox-s-4);
}
.ox-scope h1 { font-size: var(--ox-fs-4xl); }
.ox-scope h2 { font-size: var(--ox-fs-3xl); }
.ox-scope h3 { font-size: var(--ox-fs-2xl); letter-spacing: -.015em; }
.ox-scope h4 { font-size: var(--ox-fs-xl); letter-spacing: -.01em; }
.ox-scope h5 { font-size: var(--ox-fs-lg); letter-spacing: 0; }
.ox-scope h6 { font-size: var(--ox-fs-base); letter-spacing: 0; }

.ox-scope p { margin: 0 0 var(--ox-s-4); }

.ox-scope a { color: var(--ox-primary-050); text-decoration: none; transition: color var(--ox-dur-fast) var(--ox-ease); }
.ox-scope a:hover { color: var(--ox-primary); }

.ox-scope img { max-width: 100%; height: auto; }

/* ---- Layout helpers ---- */
.ox-container {
    width: 100%;
    max-width: var(--ox-container);
    margin-inline: auto;
    padding-inline: var(--ox-s-6);
}

.ox-section { padding-block: var(--ox-s-24); position: relative; }
.ox-section--tight { padding-block: var(--ox-s-16); }

/* ---- Section eyebrow + heading ---- */
.ox-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ox-s-2);
    font-size: var(--ox-fs-sm);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ox-secondary-600);
    margin-bottom: var(--ox-s-3);
}
.ox-eyebrow::before {
    content: "";
    width: 28px; height: 2px;
    background: var(--ox-gradient-accent);
    border-radius: 2px;
}

.ox-title {
    font-size: var(--ox-fs-3xl);
    letter-spacing: -.01em;
    margin-bottom: var(--ox-s-4);
}
.ox-title--center { text-align: center; }
.ox-lead { font-size: var(--ox-fs-lg); color: var(--ox-text-soft); max-width: 60ch; }

/* ---- Accessibility ---- */
.ox-scope :focus-visible,
.ox-header :focus-visible,
.ox-footer :focus-visible,
.ox-drawer :focus-visible,
.ox-totop:focus-visible {
    outline: 3px solid var(--ox-accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.ox-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

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