/* ByBento Design Tokens
   Brand system derived from Dylan Culhane's creative concept
   + Studio Kronk visual identity work
   ========================================================= */

:root {
  /* ─── Colors: Core ─── */
  --color-coral:        #FF6B5A;
  --color-teal:         #5AFFB3;
  --color-purple:       #8A5AFF;

  /* ─── Colors: Extended ─── */
  --color-orange:       #FFB366;
  --color-yellow:       #FFE066;
  --color-blue:         #5AB3FF;
  --color-pink:         #FF5AB3;

  /* ─── Colors: Surface ─── */
  --color-bg:           #0B0B0F;
  --color-bg-elevated:  #141418;
  --color-bg-card:      #1A1A20;
  --color-bg-hover:     #222228;
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);

  /* ─── Colors: Text ─── */
  --color-text:         #F5F5F7;
  --color-text-muted:   #8E8E93;
  --color-text-dim:     #636366;

  /* ─── Gradients ─── */
  --gradient-hero:       linear-gradient(135deg, #FF6B5A 0%, #FFB366 50%, #FFE066 100%);
  --gradient-accent:     linear-gradient(135deg, #8A5AFF 0%, #5AB3FF 100%);
  --gradient-cta:        linear-gradient(135deg, #5AFFB3 0%, #7ED957 100%);
  --gradient-coral-glow: radial-gradient(ellipse at 30% 20%, rgba(255, 107, 90, 0.15) 0%, transparent 60%);
  --gradient-purple-glow: radial-gradient(ellipse at 70% 80%, rgba(138, 90, 255, 0.1) 0%, transparent 60%);

  /* ─── Typography: Families ─── */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'IBM Plex Sans Condensed', 'Inter', sans-serif;

  /* ─── Typography: Sizes (fluid) ─── */
  --text-hero:    clamp(3rem, 8vw, 6rem);
  --text-h2:      clamp(2rem, 4vw, 3rem);
  --text-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --text-h4:      clamp(1rem, 1.5vw, 1.25rem);
  --text-body:    clamp(1rem, 1.2vw, 1.125rem);
  --text-small:   0.875rem;
  --text-micro:   0.75rem;

  /* ─── Typography: Weights ─── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Typography: Line Heights ─── */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ─── Typography: Letter Spacing ─── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ─── Spacing ─── */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;
  --space-section: clamp(4rem, 10vh, 8rem);

  /* ─── Layout ─── */
  --max-width:  1200px;
  --max-width-narrow: 720px;
  --gutter:     clamp(1rem, 4vw, 2rem);

  /* ─── Radius ─── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* ─── Shadows ─── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow-coral:  0 0 40px rgba(255, 107, 90, 0.2);
  --shadow-glow-teal:   0 0 40px rgba(90, 255, 179, 0.2);
  --shadow-glow-purple: 0 0 40px rgba(138, 90, 255, 0.2);

  /* ─── Transitions ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ─── Z-Index ─── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}