/* ============================================
   SalePoet — Design Tokens
   Bold & Vibrant Marketplace
   ============================================ */

:root {
  /* Color — Vivid Marketplace Palette */
  --color-primary:        #0D1117;
  --color-primary-light:  #1C2128;
  --color-coral:          #FF6155;
  --color-coral-hover:    #E8503F;
  --color-coral-soft:     #FFF0EE;
  --color-blue:           #4361EE;
  --color-blue-soft:      #EEF1FF;
  --color-mint:           #06D6A0;
  --color-mint-soft:      #E6FBF4;
  --color-amber:          #FFB627;
  --color-amber-soft:     #FFF8E6;
  --color-plum:           #9B5DE5;
  --color-plum-soft:      #F4EDFD;
  --color-danger:         #FF4757;
  --color-star:           #FFB627;

  /* Surfaces */
  --surface-page:         #FFFFFF;
  --surface-card:         #FFFFFF;
  --surface-raised:       #FFFFFF;
  --surface-inset:        #F6F8FA;
  --surface-dark:         #0D1117;
  --surface-overlay:      rgba(13, 17, 23, 0.6);

  /* Text */
  --text-primary:         #0D1117;
  --text-secondary:       #57606A;
  --text-tertiary:        #8B949E;
  --text-inverse:         #FFFFFF;
  --text-coral:           #E04A3E;
  --text-blue:            #3B55D4;

  /* Borders */
  --border-light:         #E6E9ED;
  --border-medium:        #D0D7DE;
  --border-focus:         var(--color-blue);

  /* Typography */
  --font-display:         'Fraunces', 'Georgia', serif;
  --font-body:            'Sora', 'Helvetica Neue', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.75rem;
  --text-4xl:   3.75rem;
  --text-5xl:   4.5rem;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  --leading-tight:    1.15;
  --leading-normal:   1.55;
  --leading-relaxed:  1.7;

  /* Spacing */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* Layout */
  --container-max:    1320px;
  --header-height:    72px;

  /* Radius */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-full:  9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(13, 17, 23, 0.06);
  --shadow-md:    0 4px 16px rgba(13, 17, 23, 0.08);
  --shadow-lg:    0 12px 40px rgba(13, 17, 23, 0.12);
  --shadow-xl:    0 20px 60px rgba(13, 17, 23, 0.15);
  --shadow-glow-coral: 0 8px 30px rgba(255, 97, 85, 0.25);
  --shadow-glow-blue:  0 8px 30px rgba(67, 97, 238, 0.25);

  /* Transitions */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   450ms;
}