/* ============================================
   AMINTOYS — DESIGN TOKENS
   "Factory of Wonder" — Toy Manufacturer Aesthetic
   ============================================ */

:root {
  /* ---- Toy-Shelf Colors ---- */
  --clr-yellow:       #FFCE00;
  --clr-yellow-light: #FFF3B0;
  --clr-yellow-bg:    #FFFBEB;
  --clr-orange:       #FF6B35;
  --clr-orange-light: #FFF0E8;
  --clr-orange-dark:  #E55520;
  --clr-red:          #FF3D4F;
  --clr-red-light:    #FFF0F1;
  --clr-blue:         #2B8FFF;
  --clr-blue-light:   #EBF4FF;
  --clr-green:        #00C853;
  --clr-green-light:  #E8FFF0;
  --clr-navy:         #151B2B;
  --clr-navy-mid:     #1E263A;
  --clr-navy-light:   #2A3550;
  --clr-white:        #FFFFFF;
  --clr-cream:        #FFF9F0;
  --clr-gray-100:     #F4F4F2;
  --clr-gray-200:     #E8E8E5;
  --clr-gray-300:     #D4D4D0;
  --clr-gray-400:     #ADADAD;
  --clr-gray-500:     #7A7A7A;
  --clr-gray-600:     #555555;
  --clr-gray-700:     #3A3A3A;
  --clr-gray-800:     #222222;
  --clr-text:         #1E263A;
  --clr-text-light:   #5A6478;
  --clr-success:      #00C853;
  --clr-info:         #2B8FFF;
  --clr-danger:       #FF3D4F;

  /* ---- Gradients ---- */
  --grad-hero:        linear-gradient(135deg, #FF6B35 0%, #FFCE00 100%);
  --grad-cta:         linear-gradient(135deg, #FF6B35 0%, #FFCE00 100%);
  --grad-navy:        linear-gradient(160deg, #151B2B 0%, #1E263A 50%, #2A3550 100%);
  --grad-factory:     linear-gradient(180deg, #F4F4F2 0%, #FFFFFF 40%, #FFF9F0 100%);
  --grad-warm:        linear-gradient(160deg, #FFF9F0 0%, #FFF3B0 50%, #FFF0E8 100%);
  --grad-toyshelf:    linear-gradient(135deg, #2B8FFF 0%, #00C853 30%, #FFCE00 60%, #FF6B35 100%);

  /* ---- Typography ---- */
  --ff-display:       'Lilita One', 'Impact', sans-serif;
  --ff-body:          'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:          'JetBrains Mono', monospace;
  --fs-xs:            0.75rem;
  --fs-sm:            0.875rem;
  --fs-base:          1rem;
  --fs-md:            1.125rem;
  --fs-lg:            1.25rem;
  --fs-xl:            1.5rem;
  --fs-2xl:           2rem;
  --fs-3xl:           2.75rem;
  --fs-4xl:           3.5rem;
  --fs-5xl:           4.5rem;
  --fs-6xl:           6rem;
  --fw-normal:        400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;
  --fw-black:         900;
  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.6;
  --lh-relaxed:       1.75;

  /* ---- Spacing ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- Layout ---- */
  --max-w:     1320px;
  --max-w-sm:  960px;
  --max-w-xs:  720px;

  /* ---- Borders & Radius — toy-molded shapes ---- */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* ---- Shadows — 3D tactile depth ---- */
  --shadow-sm:         0 1px 2px rgba(21,27,43,0.06), 0 1px 3px rgba(21,27,43,0.1);
  --shadow-md:         0 4px 6px -1px rgba(21,27,43,0.08), 0 2px 4px rgba(21,27,43,0.06);
  --shadow-lg:         0 10px 25px -3px rgba(21,27,43,0.1), 0 4px 10px rgba(21,27,43,0.06);
  --shadow-xl:         0 20px 50px -12px rgba(21,27,43,0.2);
  --shadow-card:       0 2px 0 rgba(21,27,43,0.04), 0 8px 24px rgba(21,27,43,0.06);
  --shadow-card-hover: 0 4px 0 rgba(21,27,43,0.02), 0 20px 48px rgba(21,27,43,0.12);
  /* 3D plastic button shadows */
  --shadow-3d:         0 4px 0 rgba(0,0,0,0.15);
  --shadow-3d-sm:      0 2px 0 rgba(0,0,0,0.15);
  --shadow-3d-orange:  0 4px 0 #C84A1A;
  --shadow-3d-yellow:  0 4px 0 #C9A200;
  --shadow-3d-navy:    0 4px 0 #0A0F1A;
  --shadow-3d-blue:    0 4px 0 #1B6ACC;
  --shadow-3d-red:     0 4px 0 #CC2233;
  --shadow-inset:      inset 0 -2px 0 rgba(0,0,0,0.1);
  /* Glow effects */
  --glow-orange:       0 0 20px rgba(255,107,53,0.25);
  --glow-yellow:       0 0 20px rgba(255,206,0,0.25);
  --glow-blue:         0 0 20px rgba(43,143,255,0.25);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast:     120ms;
  --dur-normal:   250ms;
  --dur-slow:     500ms;

  /* ---- Z-index ---- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;

  /* ---- Conveyor belt pattern ---- */
  --pattern-dots: radial-gradient(circle, rgba(21,27,43,0.06) 1px, transparent 1px);
  --pattern-grid: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(21,27,43,0.03) 39px, rgba(21,27,43,0.03) 40px),
                  repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(21,27,43,0.03) 39px, rgba(21,27,43,0.03) 40px);
  --pattern-diagonal: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,206,0,0.06) 10px,
    rgba(255,206,0,0.06) 12px
  );
}