/*=========================================================
  THE SPOILED CHEF
  DESIGN SYSTEM
  Version: 1.0
=========================================================*/

:root {

    /*=====================================================
      BRAND COLORS
    =====================================================*/

    --color-primary: #D71920;
    --color-primary-dark: #B51218;
    --color-primary-light: #FCE8E8;

    --color-secondary: #FFC928;
    --color-secondary-dark: #F0B400;
    --color-secondary-light: #FFF4CC;

    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;

    /*=====================================================
      NEUTRAL COLORS
    =====================================================*/

    --color-black: #1A1A1A;
    --color-heading: #222222;
    --color-text: #555555;
    --color-text-light: #777777;

    --color-border: #E9E9E9;

    --color-white: #FFFFFF;
    --color-background: #FFF9F4;
    --color-surface: #FFFFFF;

    /*=====================================================
      SOCIAL COLORS
    =====================================================*/

    --facebook: #1877F2;
    --instagram: #E4405F;
    --youtube: #FF0000;
    --whatsapp: #25D366;
    --google: #4285F4;

    /*=====================================================
      TYPOGRAPHY
    =====================================================*/

    --font-heading: "Bebas Neue", sans-serif;
    --font-body: "Barlow", sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 4rem;

    --line-height-heading: 1.1;
    --line-height-body: 1.7;

    /*=====================================================
      FONT WEIGHTS
    =====================================================*/

    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    /*=====================================================
      CONTAINER
    =====================================================*/

    --container-width: 1320px;
    --container-padding: 20px;

    /*=====================================================
      SPACING
    =====================================================*/

    --space-0: 0;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-72: 72px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;

    /*=====================================================
      BORDER RADIUS
    =====================================================*/

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 50px;
    --radius-circle: 50%;

    /*=====================================================
      SHADOWS
    =====================================================*/

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 20px rgba(0,0,0,.08);

    --shadow-lg:
        0 15px 40px rgba(0,0,0,.10);

    --shadow-xl:
        0 25px 60px rgba(0,0,0,.12);

    /*=====================================================
      TRANSITIONS
    =====================================================*/

    --transition-fast: .2s ease;

    --transition:
        .35s cubic-bezier(.4,0,.2,1);

    --transition-slow:
        .6s cubic-bezier(.4,0,.2,1);

    /*=====================================================
      HEADER
    =====================================================*/

    --header-height: 90px;

    /*=====================================================
      Z INDEX
    =====================================================*/

    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal: 1030;
    --z-tooltip: 1040;
    --z-loader: 9999;

    /*=====================================================
      BREAKPOINTS
      (Reference only)
    =====================================================*/

    /*
      Mobile   : 576px
      Tablet   : 768px
      Laptop   : 992px
      Desktop  : 1200px
      Large    : 1400px
    */

}