/* ==========================================================================
   WaiWai Design System 2026 — Clean Minimalistic
   Adapted from waiwai-web for wai-uni class names
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     TYPOGRAPHY (unified font — Roboto Mono)
     ------------------------------------------------------------------------- */
  --font-heading: 'Roboto Mono', monospace;
  --font-body: 'Roboto Mono', monospace;

  /* Font sizes */
  --text-hero: 3.5rem;
  --text-section-title: 1.75rem;
  --text-card-title: 1.4rem;
  --text-body: 1.125rem;
  --text-small: 0.95rem;

  /* -------------------------------------------------------------------------
     COLORS — all light backgrounds
     ------------------------------------------------------------------------- */
  /* 60% - Primary background */
  --bg-primary: #ffffff;
  --bg-muted: #F8F9FA;

  /* No more dark sections */
  --bg-dark: #F2F3F5;

  /* 10% - CTA and links */
  --color-accent: #0f5bff;
  --color-accent-hover: #0a47cc;

  /* Text */
  --text-primary: #111111;
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-on-dark: #111111;
  --text-muted: rgba(0, 0, 0, 0.45);

  /* Borders */
  --border-light: rgba(0, 0, 0, 0.08);
  --border-dark: rgba(0, 0, 0, 0.08);

  /* Legacy deep-blue variables → neutralized to light theme */
  --deep-blue-950: #F8F9FA;
  --deep-blue-850: #F2F3F5;
  --deep-blue-800: #E8E9EB;
  --deep-blue-600: #0f5bff;
  --deep-blue-highlight: #0f5bff;
  --deep-blue-border: rgba(0, 0, 0, 0.08);
  --deep-blue-text: #111111;
  --deep-blue-text-muted: rgba(0, 0, 0, 0.5);

  /* -------------------------------------------------------------------------
     SPACING (8-point grid)
     ------------------------------------------------------------------------- */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */

  /* Section padding */
  --section-py: 3rem;
  --section-px: 2rem;

  /* -------------------------------------------------------------------------
     BORDER-RADIUS (3 values only)
     ------------------------------------------------------------------------- */
  --radius-sm: 0.5rem;   /* chips, tags */
  --radius-md: 1rem;     /* cards */
  --radius-full: 999px;  /* buttons */

  /* -------------------------------------------------------------------------
     SHADOWS — lighter, more refined
     ------------------------------------------------------------------------- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-button: 0 4px 12px rgba(15, 91, 255, 0.2);

  /* -------------------------------------------------------------------------
     GRADIENTS — minimal
     ------------------------------------------------------------------------- */
  --wai-hero-gradient: none;
  --wai-accent-gradient: linear-gradient(135deg, #0f5bff 0%, #3B7BFF 100%);
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* Links */
body :where(a) {
  color: var(--color-accent);
  transition: color 0.2s ease;
}

body :where(a:hover, a:focus-visible) {
  color: var(--color-accent-hover);
}

/* ==========================================================================
   TOOLBAR — white theme
   ========================================================================== */

body :where(.site-toolbar) {
  backdrop-filter: blur(14px);
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   HERO SECTION — disabled gradient
   ========================================================================== */

body :where(.bg-gradient) {
  background: none !important;
  display: none !important;
}

/* Hero layout adjustments for light theme */
.hero-section .bottom-text {
  margin-bottom: 6rem;
}

/* On mobile, pin text closer to logo instead of pushing to bottom */
@media screen and (max-width: 991px) {
  .hero-section {
    justify-content: flex-start;
    height: auto;
    min-height: auto;
  }

  .hero-section .bottom-text {
    margin-top: 2rem;
    margin-bottom: 0;
  }

  .sliding-content {
    margin-top: 2rem;
  }
}

.sliding-content {
  margin-top: -4rem;
}

/* ==========================================================================
   SECTION BACKGROUNDS — all light
   ========================================================================== */

/* White sections */
.about-section,
.how-it-works-section,
.media-mentions,
.blog,
.reviews-section,
.awards {
  background-color: var(--bg-primary);
}

/* Light muted sections (was dark) */
.previous-courses-section,
.contact-section {
  background-color: var(--bg-muted);
}

/* Remove negative margins from legacy dark theme stacking */
.media-mentions,
.about-section,
.awards,
.reviews-section,
.contact-section {
  margin-top: 0;
}

/* ==========================================================================
   TYPOGRAPHY OVERRIDES — all Roboto Mono
   ========================================================================== */

/* Section headings */
.section-label,
.media-title,
.blog-title,
.form-title,
.about-awards-title,
.section-title {
  font-family: var(--font-heading);
}

/* Body text */
.about-text,
.course-description,
.media-article a,
.review-card,
.section-subtitle,
.schedule-description {
  font-family: var(--font-body);
}

/* Button text — unified */
.button-text {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Footer copyright */
.footer-copyright-inline {
  font-family: var(--font-body);
}

/* ==========================================================================
   CARDS — wai-uni class names
   ========================================================================== */

.course-card,
.review-card,
.infographic-card,
.about-item,
.schedule-card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover,
.review-card:hover,
.infographic-card:hover,
.about-item:hover,
.schedule-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Subtle card borders */
.course-card,
.infographic-card,
.about-item {
  border: 1px solid var(--border-light);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn-primary,
.toolbar-cta,
.section-label {
  border-radius: var(--radius-full);
}

/* ==========================================================================
   COURSES GRID (maps to .cases-section in waiwai-web)
   ========================================================================== */

.courses-grid-section {
  background-color: var(--bg-muted);
}

.courses-grid .course-card {
  background: #ffffff;
  border-color: var(--border-light);
}

.courses-grid .course-description {
  color: var(--text-secondary);
}

.courses-grid .course-title {
  color: var(--text-primary);
}

/* ==========================================================================
   PREVIOUS COURSES SECTION
   ========================================================================== */

.previous-courses-section {
  background-color: var(--bg-muted);
  padding: var(--section-py) var(--section-px);
}

.previous-courses-section .course-card {
  background: #ffffff;
  border-color: var(--border-light);
}

/* ==========================================================================
   CONTACT SECTION — light theme
   ========================================================================== */

.contact-section {
  background-color: var(--bg-muted);
  padding: var(--section-py) var(--section-px);
}

.form-title {
  font-family: var(--font-heading);
  color: var(--text-primary);
}

.contact-text,
.address-text {
  font-family: var(--font-body);
}

.contact-section .contact-text.label {
  color: var(--text-muted);
}

.contact-section .contact-text.link,
.contact-section .address-text {
  color: var(--text-primary);
}

.contact-section .divider {
  background-color: var(--border-light);
}

.contact-section .footer-copyright-inline {
  color: var(--text-muted);
}

/* ==========================================================================
   MEDIA MENTIONS
   ========================================================================== */

.media-title {
  font-family: var(--font-heading);
  font-size: var(--text-section-title);
}

.media-article a {
  font-family: var(--font-body);
}

/* ==========================================================================
   GLOBAL FONT OVERRIDES
   ========================================================================== */

body,
.button-text,
.proj-description,
.chip,
.footer-text,
.link-style,
.contact-text,
.address-text {
  font-family: var(--font-body);
}