/* ==========================================================================
   Eduhubx Child — Design Tokens
   Light + dark themes via [data-theme]. All components read these tokens.
   ========================================================================== */

:root {
  /* Brand */
  --ehx-primary:        #4F46E5;   /* indigo 600 */
  --ehx-primary-dark:   #4338CA;   /* hover / active */
  --ehx-primary-2:      #6366F1;   /* lighter indigo for gradients */
  --ehx-primary-soft:   #EEF2FF;   /* tinted surfaces, chips */
  --ehx-accent:         #F59E0B;   /* amber — badges, highlight, secondary CTA */
  --ehx-accent-soft:    #FEF3C7;   /* amber tint */
  --ehx-success:        #10B981;
  --ehx-danger:         #EF4444;
  --ehx-rating:         #F59E0B;

  /* Neutrals (light) */
  --ehx-ink:            #0F172A;   /* headings + body */
  --ehx-ink-2:          #334155;   /* strong secondary */
  --ehx-muted:          #64748B;   /* muted text (>=4.5:1 on bg) */
  --ehx-border:         #E2E8F0;
  --ehx-border-strong:  #CBD5E1;
  --ehx-bg:             #FAFAFB;   /* page */
  --ehx-bg-2:           #F1F3F9;   /* alt section bg */
  --ehx-surface:        #FFFFFF;   /* cards */
  --ehx-surface-2:      #F8FAFC;

  /* On-color text (contrast-safe) */
  --ehx-on-primary:     #FFFFFF;   /* white on indigo — passes AA */
  --ehx-on-accent:      #1F1300;   /* DARK on amber — amber+white fails AA */

  /* Typography */
  --ehx-font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --ehx-font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Type scale (1.25 ratio) */
  --ehx-fs-xs:  0.78rem;
  --ehx-fs-sm:  0.875rem;
  --ehx-fs-md:  1rem;
  --ehx-fs-lg:  1.18rem;
  --ehx-fs-xl:  1.5rem;
  --ehx-fs-2xl: 2rem;
  --ehx-fs-3xl: 2.6rem;
  --ehx-fs-4xl: clamp(2.4rem, 5vw, 3.6rem);

  /* Spacing rhythm (4/8) */
  --ehx-s1: 0.25rem; --ehx-s2: 0.5rem; --ehx-s3: 0.75rem; --ehx-s4: 1rem;
  --ehx-s5: 1.5rem;  --ehx-s6: 2rem;   --ehx-s7: 3rem;    --ehx-s8: 4rem;
  --ehx-s9: 6rem;

  /* Radius */
  --ehx-r-sm: 8px;
  --ehx-r-btn: 10px;
  --ehx-r-card: 16px;
  --ehx-r-pill: 999px;

  /* Shadows */
  --ehx-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --ehx-shadow-md: 0 6px 24px rgba(15,23,42,.08);
  --ehx-shadow-lg: 0 18px 48px rgba(15,23,42,.14);
  --ehx-ring: 0 0 0 3px rgba(79,70,229,.35);

  /* Layout */
  --ehx-container: 1200px;
  --ehx-container-wide: 1320px;

  /* Motion */
  --ehx-ease: cubic-bezier(.22,.61,.36,1);
  --ehx-dur: 220ms;

  /* Decorative */
  --ehx-grid-dot: rgba(79,70,229,.10);
  --ehx-glow: rgba(99,102,241,.20);

  color-scheme: light;
}

/* --------------------------- Dark theme --------------------------------- */
[data-theme="dark"] {
  --ehx-primary-soft:   #1E1B4B;
  --ehx-accent-soft:    #3a2c08;

  --ehx-ink:            #E5E7EB;
  --ehx-ink-2:          #CBD5E1;
  --ehx-muted:          #94A3B8;   /* >=4.5:1 on dark bg */
  --ehx-border:         #1E293B;
  --ehx-border-strong:  #334155;
  --ehx-bg:             #0B1120;
  --ehx-bg-2:           #0E1626;
  --ehx-surface:        #111827;
  --ehx-surface-2:      #0F1726;

  --ehx-on-primary:     #FFFFFF;
  --ehx-on-accent:      #1F1300;

  --ehx-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ehx-shadow-md: 0 6px 24px rgba(0,0,0,.45);
  --ehx-shadow-lg: 0 18px 48px rgba(0,0,0,.55);
  --ehx-ring: 0 0 0 3px rgba(129,140,248,.45);

  --ehx-grid-dot: rgba(129,140,248,.10);
  --ehx-glow: rgba(99,102,241,.16);

  color-scheme: dark;
}

/* Honor OS preference on very first visit (before JS sets data-theme).
   theme.js takes over and writes data-theme explicitly afterward. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ehx-primary-soft:#1E1B4B; --ehx-accent-soft:#3a2c08;
    --ehx-ink:#E5E7EB; --ehx-ink-2:#CBD5E1; --ehx-muted:#94A3B8;
    --ehx-border:#1E293B; --ehx-border-strong:#334155;
    --ehx-bg:#0B1120; --ehx-bg-2:#0E1626; --ehx-surface:#111827; --ehx-surface-2:#0F1726;
    --ehx-shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --ehx-shadow-md:0 6px 24px rgba(0,0,0,.45);
    --ehx-shadow-lg:0 18px 48px rgba(0,0,0,.55);
    --ehx-grid-dot:rgba(129,140,248,.10); --ehx-glow:rgba(99,102,241,.16);
    color-scheme: dark;
  }
}