/* ============================================================
   CLAUDE SCHOOL — Extended Design Tokens
   Extends styles.css with fluid type, color scales, glow system
   ============================================================ */

/* Brand canonical: see styles.css :root for --brand-gold*, --purple alias,
   and the semantic-history note. The --gold-* scale below is the 9-step
   tonal palette and is intentionally left as-is (W2-A12 owns scale unification). */

:root {
  /* ── Fluid Typography (clamp: min → max, scales with viewport) ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.625rem);
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem  + 1.875vw, 2.625rem);
  --text-4xl:  clamp(2.25rem,  1.75rem + 2.5vw,  3.25rem);
  --text-5xl:  clamp(2.75rem,  2rem    + 3.75vw, 4.25rem);
  --text-hero: clamp(3rem,     2rem    + 5vw,    5.5rem);

  /* ── Gold color scale (9-step) ── */
  --gold-50:  #fffbeb;
  --gold-100: #fef3c7;
  --gold-200: #fde68a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;
  --gold-500: #E8A020;
  --gold-600: #d18a10;
  --gold-700: #b45309;
  --gold-800: #92400e;
  --gold-900: #78350f;

  /* ── Teal/Accent color scale (9-step) ── */
  --teal-50:  #f0fdfb;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2EDEC9;
  --teal-500: #00C4B3;
  --teal-600: #009e8e;
  --teal-700: #0d7b6f;
  --teal-800: #115e56;
  --teal-900: #134e46;

  /* ── Purple/Pink scale ── */
  --pink-50:  #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #EC4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;

  /* ── Neutral/Dark surface scale ── */
  --gray-950: #050508;
  --gray-900: #0D0D14;
  --gray-850: #10101a;
  --gray-800: #13131E;
  --gray-750: #181825;
  --gray-700: #1e1e2e;
  --gray-600: #2a2a3f;
  --gray-500: #3d3d5c;
  --gray-400: rgba(240,240,255,0.4);
  --gray-300: rgba(240,240,255,0.6);
  --gray-200: rgba(240,240,255,0.75);
  --gray-100: rgba(240,240,255,0.9);

  /* ── Extended Glow System ── */
  --glow-gold-sm:  0 0 12px rgba(232,160,32,0.25);
  --glow-gold-md:  0 0 24px rgba(232,160,32,0.35), 0 0 48px rgba(232,160,32,0.15);
  --glow-gold-lg:  0 0 40px rgba(232,160,32,0.45), 0 0 80px rgba(232,160,32,0.20);
  --glow-teal-sm:  0 0 12px rgba(0,196,179,0.25);
  --glow-teal-md:  0 0 24px rgba(0,196,179,0.35), 0 0 48px rgba(0,196,179,0.15);
  --glow-teal-lg:  0 0 40px rgba(0,196,179,0.45), 0 0 80px rgba(0,196,179,0.20);
  --glow-pink-sm:  0 0 12px rgba(236,72,153,0.25);
  --glow-pink-md:  0 0 24px rgba(236,72,153,0.35), 0 0 48px rgba(236,72,153,0.15);
  --glow-white-sm: 0 0 16px rgba(240,240,255,0.10);

  /* ── Layer shadows (depth system) ── */
  --depth-0: none;
  --depth-1: 0 1px 2px rgba(0,0,0,0.4);
  --depth-2: 0 2px 8px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35);
  --depth-3: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --depth-4: 0 8px 32px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.45);
  --depth-5: 0 16px 64px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);

  /* ── Motion & Easing ── */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-normal:   300ms;
  --dur-slow:     500ms;
  --dur-slower:   800ms;

  /* ── Fluid Spacing ── */
  --fluid-xs:  clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
  --fluid-sm:  clamp(0.75rem, 0.6rem  + 0.75vw, 1rem);
  --fluid-md:  clamp(1rem,    0.8rem  + 1vw,    1.5rem);
  --fluid-lg:  clamp(1.5rem,  1.2rem  + 1.5vw,  2.25rem);
  --fluid-xl:  clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);
  --fluid-2xl: clamp(3rem, 2rem + 5vw, 6rem); /* תוקן: היו 4 ארגומנטים + סימן + תועה */

  /* ── Z-index scale ── */
  --z-below:   -1;
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     400;

  /* ── Section layout tokens (homepage modules) ── */
  --section-pad-block: clamp(4rem, 2.5rem + 6vw, 9rem);
  --section-gap:       clamp(3rem, 2rem + 4vw, 6rem);
  --section-content-max: 1200px;
  --hero-min-height:   clamp(640px, 88vh, 960px);

  /* ── Scroll-timeline / reveal motion ── */
  --reveal-distance:   clamp(24px, 3vw, 48px);
  --reveal-duration:   900ms;
  --reveal-stagger:    90ms;
  --reveal-easing:     cubic-bezier(0.16, 1, 0.3, 1);
  --timeline-segment:  1000;     /* anime.js virtual ms per section */

  /* ── Accent gradients used across sections ── */
  --accent-gradient:   linear-gradient(135deg, var(--pink-500) 0%, var(--gold-400) 50%, var(--teal-400) 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(232,160,32,0.14), rgba(46,222,201,0.18));
  --section-surface:   linear-gradient(180deg, rgba(19,19,30,0.0) 0%, rgba(13,13,20,0.65) 50%, rgba(5,5,8,1) 100%);
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-slower:  0ms;
    --ease-spring: linear;
    --ease-bounce: linear;
  }
}