/* ==========================================================================
   Treat Your Teacher -- Design Tokens (variables.css)
   All CSS custom properties derived from the Design Specification.
   ========================================================================== */

:root {
  /* ---- Primary Colors ---- */
  --coral:        #F4845F;
  --coral-hover:  #E87350;
  --coral-light:  #FFF0E8;

  /* ---- Secondary Colors ---- */
  --gold:         #F9C74F;
  --gold-light:   #FFF8E8;
  --green:        #90BE6D;
  --green-light:  #F0FBF0;

  /* ---- Neutrals ---- */
  --cream:           #FFF8F0;
  --white:           #FFFFFF;
  --text-primary:    #2D2D2D;
  --text-secondary:  #5C4A42;
  --text-muted:      #8C7B72;
  --border:          #FFE8D6;
  --border-focus:    #F4845F;
  --shadow:          rgba(244, 132, 95, 0.12);

  /* ---- Background Variants ---- */
  --bg-page:         #FFF8F0;
  --bg-section-alt:  #FFFFFF;
  --bg-dark:         #2D2D2D;
  --bg-dark-surface: #3D3530;

  /* ---- Typography ---- */
  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --size-display:  clamp(40px, 5.5vw, 68px);
  --size-h1:       clamp(32px, 4vw, 48px);
  --size-h2:       clamp(28px, 3.2vw, 40px);
  --size-h3:       clamp(20px, 2.5vw, 24px);
  --size-h4:       14px;
  --size-body:     clamp(16px, 1.5vw, 18px);
  --size-body-lg:  clamp(18px, 1.8vw, 20px);
  --size-sm:       clamp(14px, 1.3vw, 15px);
  --size-xs:       clamp(12px, 1.1vw, 13px);

  /* ---- Spacing (8px base grid) ---- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;

  /* ---- Border Radius ---- */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-full:  9999px;

  /* ---- Shadows (coral-tinted) ---- */
  --shadow-sm:  0 2px 8px rgba(244, 132, 95, 0.08);
  --shadow-md:  0 4px 20px rgba(244, 132, 95, 0.12);
  --shadow-lg:  0 8px 32px rgba(244, 132, 95, 0.16);
  --shadow-xl:  0 16px 48px rgba(244, 132, 95, 0.20);

  /* ---- Easing ---- */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Durations ---- */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-button:  120ms;
  --dur-fade:    500ms;
  --dur-slide:   600ms;

  /* ---- Stagger ---- */
  --stagger-tight: 60ms;
  --stagger-norm:  120ms;
  --stagger-loose: 220ms;

  /* ---- Layout ---- */
  --max-width:  1280px;
  --nav-height: 72px;
}