/*
 * Certifiedge REVAMP-03 — Design System v3.
 * Canonical semantic visual layer for public, learning and authenticated app surfaces.
 * Historical styles remain compatibility inputs until REVAMP-04 asset consolidation.
 */
:root {
  /* Typography — local/system-first: no render-blocking font network dependency. */
  --ce3-font-display: "Avenir Next", "Segoe UI Variable Display", "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ce3-font-body: "Avenir Next", "Segoe UI Variable Text", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ce3-font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", ui-monospace, monospace;
  --ce3-text-xs: .75rem;
  --ce3-text-sm: .875rem;
  --ce3-text-body: 1rem;
  --ce3-text-lg: 1.0625rem;
  --ce3-text-xl: 1.25rem;
  --ce3-title-sm: clamp(1.25rem, 1.4vw, 1.5rem);
  --ce3-title-md: clamp(1.75rem, 2.8vw, 2.75rem);
  --ce3-title-lg: clamp(2.5rem, 5vw, 4.75rem);
  --ce3-leading-tight: 1.08;
  --ce3-leading-heading: 1.16;
  --ce3-leading-body: 1.68;
  --ce3-leading-reading: 1.76;
  --ce3-tracking-tight: -.035em;
  --ce3-tracking-label: .085em;

  /* Spacing — four-pixel base with deliberate large jumps. */
  --ce3-space-1: .25rem;
  --ce3-space-2: .5rem;
  --ce3-space-3: .75rem;
  --ce3-space-4: 1rem;
  --ce3-space-5: 1.25rem;
  --ce3-space-6: 1.5rem;
  --ce3-space-8: 2rem;
  --ce3-space-10: 2.5rem;
  --ce3-space-12: 3rem;
  --ce3-space-16: 4rem;
  --ce3-space-20: 5rem;
  --ce3-space-24: 6rem;

  /* Shape — intentionally small vocabulary. */
  --ce3-radius-xs: .5rem;
  --ce3-radius-sm: .75rem;
  --ce3-radius-md: 1rem;
  --ce3-radius-lg: 1.5rem;
  --ce3-radius-pill: 999px;

  /* Brand and status. Primary is AA-safe with white text. */
  --ce3-brand: #4967e8;
  --ce3-brand-hover: #3d5fd7;
  --ce3-brand-soft: #e9edff;
  --ce3-accent: #0e7490;
  --ce3-accent-bright: #67e8f9;
  --ce3-success: #0f766e;
  --ce3-warning: #a16207;
  --ce3-danger: #b42318;
  --ce3-info: #075985;

  /* Dark foundation. */
  --ce3-bg: #0a0c10;
  --ce3-surface-1: #10141b;
  --ce3-surface-2: #171c25;
  --ce3-surface-3: #202735;
  --ce3-surface-float: rgba(23, 28, 37, .88);
  --ce3-text: #f7f8fb;
  --ce3-text-secondary: #c8cfda;
  --ce3-text-muted: #98a2b3;
  --ce3-line: rgba(247, 248, 251, .11);
  --ce3-line-strong: rgba(247, 248, 251, .20);

  /* Bright surface authority. */
  --ce3-light-bg: #f6f7f9;
  --ce3-light-surface: #ffffff;
  --ce3-light-surface-2: #eef1f5;
  --ce3-light-text: #111827;
  --ce3-light-text-secondary: #3f4a5a;
  --ce3-light-muted: #596579;
  --ce3-light-line: rgba(17, 24, 39, .13);

  /* Elevation. Structure should be felt, not outlined everywhere. */
  --ce3-shadow-1: 0 1px 2px rgba(3, 7, 18, .08), 0 8px 24px rgba(3, 7, 18, .06);
  --ce3-shadow-2: 0 2px 4px rgba(3, 7, 18, .10), 0 18px 48px rgba(3, 7, 18, .12);
  --ce3-shadow-3: 0 4px 12px rgba(3, 7, 18, .14), 0 32px 90px rgba(3, 7, 18, .18);

  /* Motion. Semantic roles replace arbitrary per-component timings. */
  --ce3-motion-instant: 100ms;
  --ce3-motion-fast: 160ms;
  --ce3-motion-base: 240ms;
  --ce3-motion-slow: 420ms;
  --ce3-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ce3-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ce3-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Interaction and layout. */
  --ce3-control-min: 48px;
  --ce3-focus: #67e8f9;
  --ce3-focus-ring: 0 0 0 3px rgba(103, 232, 249, .72), 0 0 0 6px rgba(10, 12, 16, .88);
  --ce3-content-narrow: 45rem;
  --ce3-content-reading: 52rem;
  --ce3-content-wide: 75rem;
  --ce3-content-max: 82.5rem;
  --ce3-reading-measure: 72ch;

  /* Spatial vocabulary. REVAMP-03 defines meaning; REVAMP-04 owns runtime. */
  --ce3-depth-content: 0;
  --ce3-depth-raised: 1;
  --ce3-depth-floating: 2;
  --ce3-depth-overlay: 3;
  --ce3-perspective-standard: 1200px;
  --ce3-perspective-wide: 1800px;
  --ce3-scene-bg: #080b10;
  --ce3-scene-poster-bg: radial-gradient(circle at 68% 30%, rgba(73, 103, 232, .20), transparent 34%), linear-gradient(145deg, #0a0c10, #141a24);

  /* Compatibility aliases consumed by older surfaces. */
  --ce-font-heading: var(--ce3-font-display);
  --ce-font-body: var(--ce3-font-body);
  --ce-radius-xs: var(--ce3-radius-xs);
  --ce-radius-sm: var(--ce3-radius-sm);
  --ce-radius-md: var(--ce3-radius-md);
  --ce-radius-lg: var(--ce3-radius-lg);
  --ce-radius-pill: var(--ce3-radius-pill);
  --ce-control-min: var(--ce3-control-min);
  --ce-touch-min: var(--ce3-control-min);
  --ce-content-narrow: var(--ce3-content-narrow);
  --ce-content-reading: var(--ce3-content-reading);
  --ce-content-wide: var(--ce3-content-wide);
  --ce-content-max: var(--ce3-content-max);
  --ce-measure: var(--ce3-reading-measure);
  --ce-motion-fast: var(--ce3-motion-fast);
  --ce-motion-medium: var(--ce3-motion-base);
  --ce-motion-slow: var(--ce3-motion-slow);
  --ce-ease-standard: var(--ce3-ease-standard);
}

/* Base authority. */
body.ce-design-system-v3 {
  --ce-surface-0: var(--ce3-bg);
  --ce-surface-1: var(--ce3-surface-1);
  --ce-surface-2: var(--ce3-surface-2);
  --ce-surface-3: var(--ce3-surface-3);
  --ce-bg-page: var(--ce3-bg);
  --ce-bg-surface: var(--ce3-surface-1);
  --ce-bg-elevated: var(--ce3-surface-2);
  --ce-text-primary: var(--ce3-text);
  --ce-text-secondary: var(--ce3-text-secondary);
  --ce-text-strong: var(--ce3-text);
  --ce-text-soft: var(--ce3-text-secondary);
  --ce-text-muted: var(--ce3-text-muted);
  --ce-muted: var(--ce3-text-muted);
  --ce-line: var(--ce3-line);
  --ce-line-strong: var(--ce3-line-strong);
  --ce-blue: var(--ce3-brand);
  --ce-cyan: var(--ce3-accent-bright);
  --ce-emerald: #20b99a;
  --ce-shadow-sm: var(--ce3-shadow-1);
  --ce-shadow-md: var(--ce3-shadow-2);
  --ce-shadow-lg: var(--ce3-shadow-3);
  --ce-shadow: var(--ce3-shadow-3);
  --ce-focus-ring: var(--ce3-focus-ring);
  background: var(--ce3-bg);
  color: var(--ce3-text);
  font-family: var(--ce3-font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body.ce-design-system-v3.ce-theme-light {
  --ce-surface-0: var(--ce3-light-bg);
  --ce-surface-1: var(--ce3-light-surface);
  --ce-surface-2: var(--ce3-light-surface-2);
  --ce-surface-3: #e1e6ed;
  --ce-bg-page: var(--ce3-light-bg);
  --ce-bg-surface: var(--ce3-light-surface);
  --ce-bg-elevated: var(--ce3-light-surface-2);
  --ce-text-primary: var(--ce3-light-text);
  --ce-text-secondary: var(--ce3-light-text-secondary);
  --ce-text-strong: var(--ce3-light-text);
  --ce-text-soft: var(--ce3-light-text-secondary);
  --ce-text-muted: var(--ce3-light-muted);
  --ce-muted: var(--ce3-light-muted);
  --ce-line: var(--ce3-light-line);
  --ce-line-strong: rgba(17, 24, 39, .23);
  --ce-cyan: var(--ce3-accent);
  --ce-focus-ring: 0 0 0 3px rgba(14, 116, 144, .28), 0 0 0 5px #fff;
  background: var(--ce3-light-bg);
  color: var(--ce3-light-text);
}

/* Typography hierarchy: strong but not billboard-heavy. */
.ce-design-system-v3 :where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--ce3-font-display);
  color: inherit;
  text-wrap: balance;
}
.ce-design-system-v3 h1 { font-size: var(--ce3-title-lg); line-height: var(--ce3-leading-tight); letter-spacing: var(--ce3-tracking-tight); }
.ce-design-system-v3 h2 { font-size: var(--ce3-title-md); line-height: var(--ce3-leading-heading); letter-spacing: -.025em; }
.ce-design-system-v3 h3 { font-size: var(--ce3-title-sm); line-height: 1.28; letter-spacing: -.012em; }
.ce-design-system-v3 :where(.ce-readable,.ce-content,.ce-prof-prose,.ce-study-section__reading,.ce-learner-reading) { max-width: var(--ce3-content-reading); }
.ce-design-system-v3 :where(.ce-readable,.ce-content,.ce-prof-prose) :where(p,li) { line-height: var(--ce3-leading-reading); }
.ce-design-system-v3 :where(.ce-eyebrow,.ce-public-eyebrow,.ce-kicker,.ce-section-kicker) {
  font-size: var(--ce3-text-xs);
  font-weight: 800;
  letter-spacing: var(--ce3-tracking-label);
}

/* Layout rhythm. */
.ce-design-system-v3 .ce-container { width: min(calc(100% - clamp(2rem, 5vw, 5rem)), var(--ce3-content-wide)); }
.ce-design-system-v3 .ce-page-shell { width: min(calc(100% - clamp(2rem, 5vw, 5rem)), var(--ce3-content-wide)); }
.ce-design-system-v3 .ce-main > .ce-section:not(.ce-section--study) { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.ce-design-system-v3 .ce-section--tight { padding-block: clamp(2.25rem, 4vw, 4rem); }

/* Interactive controls. */
.ce-design-system-v3 :where(button,.ce-button,input:not([type="hidden"]),select,textarea,summary,[role="button"]) { font: inherit; }
.ce-design-system-v3 :where(.ce-button,button:not(.ce-icon-button),input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select) { min-height: var(--ce3-control-min); }
.ce-design-system-v3 :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ce3-focus);
  outline-offset: 3px;
}
.ce-design-system-v3 .ce-button {
  gap: .5rem;
  min-height: var(--ce3-control-min);
  padding-inline: 1.125rem;
  border-radius: var(--ce3-radius-sm);
  font-size: var(--ce3-text-sm);
  font-weight: 780;
  letter-spacing: -.005em;
  transition: transform var(--ce3-motion-fast) var(--ce3-ease-standard), box-shadow var(--ce3-motion-base) var(--ce3-ease-standard), border-color var(--ce3-motion-fast) linear, background-color var(--ce3-motion-fast) linear;
}
.ce-design-system-v3 .ce-button:hover { transform: translateY(-1px); }
.ce-design-system-v3 .ce-button--primary {
  border-color: transparent;
  background: var(--ce3-brand);
  color: #fff;
  box-shadow: 0 8px 24px rgba(73, 103, 232, .24);
}
.ce-design-system-v3 .ce-button--primary:hover { background: var(--ce3-brand-hover); box-shadow: 0 12px 30px rgba(61, 95, 215, .27); }
.ce-design-system-v3 .ce-button--secondary {
  border-color: var(--ce3-light-line);
  background: #fff;
  color: var(--ce3-light-text);
  box-shadow: var(--ce3-shadow-1);
}
.ce-design-system-v3 .ce-button--ghost,
.ce-design-system-v3 .ce-button--outline {
  border-color: var(--ce-line-strong);
  background: rgba(255,255,255,.045);
  color: var(--ce-text-strong);
  box-shadow: none;
}
.ce-design-system-v3.ce-theme-light :where(.ce-button--ghost,.ce-button--outline) { background: rgba(255,255,255,.72); }
.ce-design-system-v3 .ce-button[disabled],
.ce-design-system-v3 .ce-button[aria-disabled="true"] { opacity: .55; transform: none; box-shadow: none; }

/* Forms: readable, calm, predictable. */
.ce-design-system-v3 :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) {
  border: 1px solid var(--ce-line-strong);
  border-radius: var(--ce3-radius-sm);
  background: var(--ce-surface-1);
  color: var(--ce-text-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
  transition: border-color var(--ce3-motion-fast) linear, box-shadow var(--ce3-motion-fast) linear, background-color var(--ce3-motion-fast) linear;
}
.ce-design-system-v3.ce-theme-light :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea) { background:#fff; }
.ce-design-system-v3 :where(input,select,textarea):focus-visible { border-color: var(--ce3-accent); box-shadow: 0 0 0 3px rgba(14,116,144,.16); }
.ce-design-system-v3 :where(label,legend) { color: var(--ce-text-strong); font-weight: 700; }

/* Surfaces and cards: quiet separation rather than permanent glass effects. */
.ce-design-system-v3 :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-report-card,.ce-lab-card,.ce-school-card,.ce-trust-pill,.ce-method-step) {
  border-color: var(--ce-line);
  border-radius: var(--ce3-radius-md);
  box-shadow: var(--ce3-shadow-1);
}
.ce-design-system-v3 :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-report-card,.ce-lab-card,.ce-school-card) {
  background: var(--ce-surface-1);
}
.ce-design-system-v3.ce-theme-light :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-report-card,.ce-lab-card,.ce-school-card) {
  background: var(--ce3-light-surface);
}
.ce-design-system-v3 :where(.ce-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-visual-card):hover {
  transform: translateY(-2px);
  border-color: var(--ce-line-strong);
  box-shadow: var(--ce3-shadow-2);
}
.ce-design-system-v3 :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-visual-card)::before { opacity: 0; }

/* Explicit material utilities for future spatial/UI composition. */
.ce-design-system-v3 .ce-surface-content { background: var(--ce-surface-1); border: 1px solid var(--ce-line); border-radius: var(--ce3-radius-md); }
.ce-design-system-v3 .ce-surface-raised { background: var(--ce-surface-2); border: 1px solid var(--ce-line); border-radius: var(--ce3-radius-md); box-shadow: var(--ce3-shadow-1); }
.ce-design-system-v3 .ce-surface-floating { background: var(--ce3-surface-float); border: 1px solid var(--ce-line-strong); border-radius: var(--ce3-radius-lg); box-shadow: var(--ce3-shadow-3); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ce-design-system-v3 .ce-surface-floating { backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05); }
}

/* Spatial semantics. No 3D runtime is loaded by Design System v3. */
.ce-design-system-v3 .ce-spatial-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ce3-scene-poster-bg);
  perspective: var(--ce3-perspective-standard);
}
.ce-design-system-v3 .ce-depth-raised { position: relative; z-index: var(--ce3-depth-raised); }
.ce-design-system-v3 .ce-depth-floating { position: relative; z-index: var(--ce3-depth-floating); }
.ce-design-system-v3 .ce-depth-overlay { position: relative; z-index: var(--ce3-depth-overlay); }
.ce-design-system-v3 .ce-spatial-fallback { display: grid; place-items: center; min-height: 16rem; background: var(--ce3-scene-poster-bg); }

/* Status chips inherit semantic meaning, not decorative color proliferation. */
.ce-design-system-v3 :where(.ce-badge,.ce-pill,.ce-status-pill) { border-radius: var(--ce3-radius-pill); font-size: var(--ce3-text-xs); font-weight: 760; }

/* Motion is purposeful and optional. */
@media (prefers-reduced-motion: reduce) {
  .ce-design-system-v3 *,
  .ce-design-system-v3 *::before,
  .ce-design-system-v3 *::after {
    scroll-behavior: auto;
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
  .ce-design-system-v3 :where(.ce-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-visual-card,.ce-button):hover { transform: none; }
}

@media (prefers-contrast: more) {
  .ce-design-system-v3 { --ce-line: rgba(247,248,251,.34); --ce-line-strong: rgba(247,248,251,.62); }
  .ce-design-system-v3.ce-theme-light { --ce-line: rgba(17,24,39,.30); --ce-line-strong: rgba(17,24,39,.58); }
  .ce-design-system-v3 :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,input,select,textarea) { border-width: 2px; }
}

@media (forced-colors: active) {
  .ce-design-system-v3 :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-surface-content,.ce-surface-raised,.ce-surface-floating) { border: 1px solid CanvasText; box-shadow: none; background: Canvas; color: CanvasText; }
  .ce-design-system-v3 :where(.ce-button,button,input,select,textarea,summary) { forced-color-adjust: auto; }
  .ce-design-system-v3 :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}

/* Mobile recomposes spacing rather than shrinking desktop type indefinitely. */
@media (max-width: 720px) {
  :root { --ce3-title-lg: clamp(2.25rem, 12vw, 3.5rem); --ce3-title-md: clamp(1.75rem, 8vw, 2.5rem); }
  .ce-design-system-v3 .ce-container,
  .ce-design-system-v3 .ce-page-shell { width: min(calc(100% - 2rem), var(--ce3-content-wide)); }
  .ce-design-system-v3 .ce-main > .ce-section:not(.ce-section--study) { padding-block: clamp(2.75rem, 10vw, 4.5rem); }
}

/* Immediate-surface authority: nested bright content does not inherit dark card material. */
.ce-design-system-v3 :where(.ce-section--light,.ce2-section--light,.ce-lesson-quiz,.ce-lesson-cycle,.ce-improvement-guidance,.ce-cycle-read-only,.ce-learning-search-results,.ce-kids-stage-note,.ce-improvement-hub) {
  --ce-surface-1: var(--ce3-light-surface);
  --ce-surface-2: var(--ce3-light-surface-2);
  --ce-text-strong: var(--ce3-light-text);
  --ce-text-primary: var(--ce3-light-text);
  --ce-text-secondary: var(--ce3-light-text-secondary);
  --ce-text-muted: var(--ce3-light-muted);
  --ce-muted: var(--ce3-light-muted);
  --ce-line: var(--ce3-light-line);
  --ce-line-strong: rgba(17,24,39,.23);
  color: var(--ce3-light-text);
}
.ce-design-system-v3 :where(.ce-section--light,.ce2-section--light,.ce-lesson-quiz,.ce-lesson-cycle,.ce-improvement-guidance,.ce-cycle-read-only,.ce-learning-search-results,.ce-kids-stage-note,.ce-improvement-hub) :where(.ce-card,.ce-dashboard-card,.ce-course-card,.ce-pricing-card,.ce-pathway-card,.ce-report-card,.ce-lab-card,.ce-school-card) {
  background: var(--ce3-light-surface);
  color: var(--ce3-light-text);
  border-color: var(--ce3-light-line);
}
.ce-design-system-v3 :where(.ce-section--light,.ce2-section--light,.ce-lesson-quiz,.ce-lesson-cycle,.ce-improvement-guidance,.ce-cycle-read-only,.ce-learning-search-results,.ce-kids-stage-note,.ce-improvement-hub) :where(p,li,small,span:not(.ce-badge):not(.ce-pill):not(.ce-status-pill)) {
  color: var(--ce3-light-text-secondary);
}
.ce-design-system-v3 :where(.ce-section--light,.ce2-section--light,.ce-lesson-quiz,.ce-lesson-cycle,.ce-improvement-guidance,.ce-cycle-read-only,.ce-learning-search-results,.ce-kids-stage-note,.ce-improvement-hub) :where(h1,h2,h3,h4,h5,h6,strong,label,legend) {
  color: var(--ce3-light-text);
}