/* ==========================================================================
   Klass360 – Design Tokens
   Brand colours come from the Klass360 logo:
     Navy  #064E6A  (wordmark "klass" + top half of mark)
     Lime  #96CF00  (wordmark "360"  + bottom half of mark)
   Change brand colours here only – every component reads from these tokens.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --c-primary: #96CF00;          /* Lime – CTAs, highlights          */
  --c-primary-hover: #86BA00;
  --c-primary-soft: #E9F6C7;     /* soft lime tint                   */
  --c-secondary: #064E6A;        /* Navy – dark cards, buttons       */
  --c-secondary-hover: #053F56;
  --c-secondary-muted: #3E6B7D;  /* muted navy card                  */

  /* ---- Neutrals ---- */
  --c-heading: #062B3B;          /* headings / dark text             */
  --c-text: #5A6B75;             /* body copy                        */
  --c-text-light: #8A99A1;
  --c-ink: #031821;              /* deepest background (dark panels) */
  --c-bg: #F2F5F4;               /* page background                  */
  --c-surface: #FFFFFF;
  --c-surface-alt: #F7F9F9;
  --c-border: rgba(6, 78, 106, 0.1);
  --c-border-strong: rgba(6, 78, 106, 0.18);
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: rgba(255, 255, 255, 0.72);
  --c-on-dark-border: rgba(255, 255, 255, 0.12);

  /* ---- Typography ---- */
  --ff-base: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-h2: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  --fs-h1: clamp(2.375rem, 1.4rem + 4vw, 4.25rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.75;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: clamp(3.5rem, 2rem + 4.5vw, 6rem);
  --gutter: 1rem;

  /* ---- Layout ---- */
  --container: 1320px;
  --header-h: 68px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(6, 43, 59, 0.06);
  --shadow-md: 0 12px 32px rgba(6, 43, 59, 0.08);
  --shadow-lg: 0 24px 60px rgba(6, 43, 59, 0.14);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s;
  --t-base: 0.35s;
  --t-slow: 0.7s;

  /* ---- Layers ---- */
  --z-header: 100;
  --z-overlay: 150;
  --z-nav: 200;
  --z-top: 300;
}

@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --header-h: 76px;
  }
}