/* ==========================================================
   VARIABLES GLOBALES
   Design System - Bsale Landings
========================================================== */

:root {

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

  /* Brand */

  --color-primary-orange: #FF5C1A;
  --color-primary-orange-hover: #DA460C;

  --color-primary-blue: #2068C5;
  --color-secondary-blue: #33517A;

  /* Secondary */

  --color-secondary-orange: #F9D6C4;

  /* Neutral */

  --color-secondary-gray: #505A68;
  --color-gray-light: #6A788A;

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Backgrounds */

  --background-white: #FFFFFF;
  --background-gray: #F0F2F4;
  --background-light-blue: #F8FBFF;

  /* Blue Scale */

  --color-blue-50: #F8FBFF;
  --color-blue-100: #EDF5FF;
  --color-blue-200: #EAF1FA;
  --color-blue-300: #DCE6F5;

  /* Borders */

  --color-border: #E8EEF6;
  --color-border-hover: #D5E4F8;

  /* Semantic */

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

  /* Misc */

  --color-text-underlined: #C7D9F1;
  --color-focus-ring: rgba(32,104,197,.18);


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

  /* Families */

  --font-title-family: "Inter", sans-serif;
  --font-body-family: "Inter", sans-serif;
  --font-cursive-family: "Rosario", sans-serif;

  /* Sizes */

  --font-size-display: 2.8rem;
  --font-size-heading: 2.25rem;
  --font-size-subheading: 1.35rem;

  --font-size-body-lg: 1.1rem;
  --font-size-body: 1rem;
  --font-size-small: .9rem;
  --font-size-xs: .8rem;

  /* Weights */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Height */

  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;


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

  /* Space Scale */

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Sections */

  --section-padding-y: 6rem;
  --section-padding-y-tablet: 4rem;
  --section-padding-y-mobile: 3rem;

  /* Content */

  --content-width-sm: 580px;
  --content-width-md: 760px;
  --content-width-lg: 960px;

  /* Grid */

  --grid-gap: 2rem;


  /* ==========================================================
     SIZING
  ========================================================== */

  /* Buttons */

  --button-height-sm: 40px;
  --button-height: 48px;
  --button-min-width: 170px;

  /* Icons */

  --icon-size-sm: 48px;
  --icon-size-md: 64px;
  --icon-size-lg: 90px;

  /* Cards */

  --card-padding: 2rem;
  --card-padding-lg: 2.25rem;


  /* ==========================================================
     LAYOUT
  ========================================================== */

  /* Bootstrap containers (referencia) */

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;


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

  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;


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

  --shadow-sm: 0 10px 25px rgba(23,56,104,.08);
  --shadow-md: 0 18px 45px rgba(23,56,104,.10);
  --shadow-lg: 0 20px 45px rgba(23,56,104,.12);

  --shadow-dropdown: 0 12px 30px rgba(12,0,46,.12);


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

  --transition-fast: .2s ease;
  --transition-normal: .3s ease;
  --transition-slow: .45s ease;


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

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;


  /* ==========================================================
     BREAKPOINTS
  ========================================================== */

  /*
    xs  <576px
    sm  ?576px
    md  ?768px
    lg  ?992px
    xl  ?1200px
  */

}