/* ═══════════════════════════════════════════════════
   ZYPAWAY — Design Tokens
   Warm coral + deep teal color palette
   Font: Outfit (Google Fonts)
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Brand Colors ─── */
  --coral:            #FF6B5A;
  --coral-dark:       #E85545;
  --coral-light:      #FF8A7A;
  --teal:             #0D9488;
  --teal-dark:        #0F766E;
  --teal-light:       #2DD4BF;
  --midnight:         #1A1A2E;
  --midnight-soft:    #2A2A40;
  --navy:             #1A1A2E;
  --slate:            #334155;
  --accent-teal:      #0D9488;

  /* ─── Primary ─── */
  --primary:          var(--coral);
  --primary-hover:    var(--coral-dark);
  --primary-light:    var(--coral-light);
  --primary-bg:       rgba(255, 107, 90, 0.12);
  --primary-bg-subtle: rgba(255, 107, 90, 0.06);

  /* ─── Accent ─── */
  --accent:           var(--teal);
  --accent-hover:     var(--teal-dark);
  --accent-light:     var(--teal-light);
  --accent-bg:        rgba(13, 148, 136, 0.12);
  --accent-red:       #EF4444;
  --accent-amber:     #F59E0B;
  --accent-green:     #22C55E;

  /* ─── Backgrounds ─── */
  --bg-page:          #FAFAF9;
  --bg-card:          #FFFFFF;
  --bg-sidebar:       var(--midnight);
  --bg-input:         #F5F4F2;
  --bg-dark:          var(--midnight);

  /* ─── Text ─── */
  --text-primary:     #1C1917;
  --text-secondary:   #78716C;
  --text-tertiary:    #A8A29E;
  --text-inverse:     #FFFFFF;

  /* ─── Borders ─── */
  --border-light:     #E7E5E4;
  --border-medium:    #D6D3D1;
  --border-accent:    rgba(255, 107, 90, 0.3);

  /* ─── Shadows ─── */
  --shadow-xs:        0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm:        0 2px 8px rgba(28, 25, 23, 0.06);
  --shadow-md:        0 4px 16px rgba(28, 25, 23, 0.08);
  --shadow-lg:        0 8px 32px rgba(28, 25, 23, 0.1);
  --shadow-xl:        0 16px 48px rgba(28, 25, 23, 0.12);
  --shadow-glow:      0 0 24px rgba(255, 107, 90, 0.25);

  /* ─── Radii ─── */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --radius-xl:        18px;
  --radius-2xl:       24px;
  --radius-full:      9999px;

  /* ─── Typography ─── */
  --font-family:      'Outfit', sans-serif;
  --text-xs:          12px;
  --text-sm:          14px;
  --text-base:        16px;
  --text-lg:          18px;
  --text-xl:          22px;
  --text-2xl:         28px;
  --text-3xl:         36px;
  --text-4xl:         48px;
  --text-5xl:         60px;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Spacing ─── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─── Transitions ─── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}