/**
 * WalkWise Design Tokens
 * Source of truth: https://pilatuseducativa.com.br/walkwise/
 * All custom properties prefixed --ww-
 */

:root {
  /* ── Colour palette ── */
  --ww-primary:      #F47B20;   /* orange — buttons, CTAs, icons */
  --ww-amber:        #FBB50E;   /* amber — gradient end, highlights */
  --ww-gold:         #FFD958;   /* gold — subtle accents */
  --ww-light-orange: #FFBC7D;   /* light orange — soft gradient stop */
  --ww-green:        #5DB12F;   /* green — success, secondary CTA, checklist */
  --ww-navy:         #09141E;   /* navy — footer headings, deep text */
  --ww-text:         #264653;   /* primary text */
  --ww-body:         #5D5D5D;   /* body copy */
  --ww-gray-alt:     #6B6B6B;   /* secondary copy */
  --ww-lavender:     #F5F6FF;   /* light section backgrounds, footer */
  --ww-bg-blue:      #F6FAFE;   /* alternate section bg */
  --ww-white:        #FFFFFF;
  --ww-black:        #000000;
  --ww-border:       #E2E5E9;   /* neutral hairline — borders, progress-ring track */

  /* ── Gradients ── */
  --ww-gradient:        linear-gradient(135deg, #F47B20 0%, #FBB50E 100%);
  --ww-gradient-135:    linear-gradient(135deg, #F47B20 0%, #FBB50E 100%);
  --ww-gradient-180:    linear-gradient(180deg, #F47B20 0%, #FBB50E 100%);
  --ww-gradient-90:     linear-gradient(90deg,  #F47B20 0%, #FBB50E 100%);
  --ww-gradient-soft:   linear-gradient(135deg, #FFBC7D 0%, #FBB50E 100%);
  --ww-gradient-photo:  linear-gradient(135deg, rgba(244,123,32,.85) 0%, rgba(251,181,14,.85) 100%);

  /* ── Typography ── */
  --ww-font-heading: 'Montserrat', sans-serif;
  --ww-font-body:    'Montserrat', sans-serif;
  --ww-font-sub:     'Inter', sans-serif;
  --ww-font-label:   'Archivo', sans-serif;
  --ww-font-mono:    'Fira Code', monospace;

  /* Font scales */
  --ww-text-xs:   0.75rem;   /* 12px */
  --ww-text-sm:   0.875rem;  /* 14px */
  --ww-text-base: 1rem;      /* 16px */
  --ww-text-lg:   1.125rem;  /* 18px */
  --ww-text-xl:   1.25rem;   /* 20px */
  --ww-text-2xl:  1.5rem;    /* 24px */
  --ww-text-3xl:  1.875rem;  /* 30px */
  --ww-text-4xl:  2.25rem;   /* 36px */
  --ww-text-5xl:  3rem;      /* 48px */
  --ww-text-hero: 3.4375rem; /* 55px — desktop hero */

  /* Weights */
  --ww-weight-light:    300;
  --ww-weight-regular:  400;
  --ww-weight-medium:   500;
  --ww-weight-semibold: 600;
  --ww-weight-bold:     700;
  --ww-weight-black:    800;

  /* Line heights */
  --ww-lh-tight:   1.2;
  --ww-lh-heading: 1.3;
  --ww-lh-body:    1.65;    /* Readable default; marketing blocks use --ww-lh-sub */
  --ww-lh-sub:     1.6;

  /* Letter spacing */
  --ww-ls-tight:   -0.1em;
  --ww-ls-hero:    -0.03em;
  --ww-ls-heading: -0.01em;
  --ww-ls-body:     0.019em;
  --ww-ls-label:    0.05em;
  --ww-ls-upper:    0.08em;

  /* ── Spacing (8-point grid) ── */
  --ww-space-1:  0.25rem;  /* 4px  */
  --ww-space-2:  0.5rem;   /* 8px  */
  --ww-space-3:  0.75rem;  /* 12px */
  --ww-space-4:  1rem;     /* 16px */
  --ww-space-5:  1.25rem;  /* 20px */
  --ww-space-6:  1.5rem;   /* 24px */
  --ww-space-8:  2rem;     /* 32px */
  --ww-space-10: 2.5rem;   /* 40px */
  --ww-space-12: 3rem;     /* 48px */
  --ww-space-16: 4rem;     /* 64px */
  --ww-space-20: 5rem;     /* 80px */
  --ww-space-24: 6rem;     /* 96px */

  /* ── Border radius ── */
  --ww-radius-sm:   0.375rem; /* 6px  */
  --ww-radius-md:   0.75rem;  /* 12px */
  --ww-radius-lg:   1rem;     /* 16px */
  --ww-radius-xl:   1.5rem;   /* 24px */
  --ww-radius-pill: 9999px;   /* full pill */

  /* ── Shadows ── */
  --ww-shadow-sm:  0 1px 4px rgba(0,0,0,.10);
  --ww-shadow-md:  0 4px 16px rgba(0,0,0,.12);
  --ww-shadow-lg:  0 8px 32px rgba(0,0,0,.14);
  --ww-shadow-card: 0 4px 24px rgba(244,123,32,.15);

  /* ── Transitions ── */
  --ww-transition: 200ms ease;
  --ww-transition-slow: 400ms ease;

  /* ── Layout ── */
  --ww-container: 1140px;
  --ww-header-h:  80px;
}

/* ─── DARK MODE ─── */
html.dark-mode {
  --ww-bg: #0D1117;
  --ww-lavender: #161B22;
  --ww-text: #E6EDF3;
  --ww-body: #8B949E;
  --ww-border: #30363D;
  --ww-shadow-card: 0 2px 12px rgba(0,0,0,.4);
  --ww-shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --ww-shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  /* Keep brand colors */
  --ww-primary: #F47B20;
  --ww-accent: #FBB50E;
  --ww-green: #5DB12F;
}
html.dark-mode body { background: var(--ww-bg); color: var(--ww-text); }
html.dark-mode .tutor-course-card,
html.dark-mode .ww-coord-dash__section,
html.dark-mode .ww-turma-course,
html.dark-mode .ww-onboarding,
html.dark-mode .ww-badges,
html.dark-mode .ww-kpi-card,
html.dark-mode .ww-lesson-nav { background: #161B22 !important; color: var(--ww-text); border-color: var(--ww-border); }
html.dark-mode .ww-toast { background: #161B22; color: var(--ww-text); }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea {
  background: #0D1117 !important; color: var(--ww-text) !important;
  border-color: var(--ww-border) !important;
}
html.dark-mode a { color: var(--ww-primary); }
html.dark-mode .ww-badge__label { color: var(--ww-text); }

/* ─── DARK MODE TOGGLE BUTTON ─── */
.ww-dark-toggle {
  position: fixed; bottom: 5rem; right: 1.25rem; z-index: 10000;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ww-primary, #F47B20); color: white;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(244,123,32,.4);
  transition: transform .15s, box-shadow .15s;
}
.ww-dark-toggle:hover, .ww-dark-toggle:focus-visible {
  transform: scale(1.1); box-shadow: 0 6px 20px rgba(244,123,32,.5);
  outline: 2px solid var(--ww-primary, #F47B20); outline-offset: 2px;
}
html.dark-mode .ww-dark-toggle { background: #FBB50E; color: #09141E; }
@media (prefers-reduced-motion: reduce) {
  .ww-dark-toggle { transition: none; }
}