/* ==========================================================================
   Design Tokens — Banco Falabella Perú (https://www.bancofalabella.pe/)
   All values extracted from getComputedStyle() on the live site.
   ========================================================================== */

/* Self-hosted fonts (downloaded from the original site) */
@font-face {
  font-family: 'mainFonts';
  src: url('../assets/fonts/024f358a1b5cebc8-s.p.ttf') format('truetype');
  font-weight: 100 900; /* variable font, wght axis (fvar) */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FalabellaIcons';
  src: url('../assets/fonts/FalabellaIcons-new.fd449970.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* --- Colors: brand greens --- */
  --green: #3B9326;            /* primary buttons, accents            rgb(59,147,38)  */
  --green-dark: #347B23;       /* topbar bg, badge bg                 rgb(52,123,35)  */
  --green-darker: #1C780A;     /* hover text/border on light green    rgb(28,120,10)  */
  --green-bright: #42AC2A;     /* Educación Financiera banner         rgb(66,172,42)  */
  --green-hover: #38A121;      /* rgb(56,161,33)                      */
  --green-tint-12: rgba(59, 146, 38, .12);  /* "Hazte cliente" resting bg   */
  --green-tint-06: rgba(59, 146, 38, .06);  /* hover bg                     */
  --bg-mint: #EFF8EA;          /* "¡No te lo pierdas!" banner         rgb(239,248,234) */
  --lime: #BDD004;             /* active carousel dot                 rgb(189,208,4)  */
  --lime-pale: #E9F0C8;        /* inactive carousel dot (::after)     rgb(233,240,200) */

  /* --- Colors: promo red --- */
  --red: #EB0029;              /* CMR prices                          rgb(235,0,41)   */
  --red-badge: #D60942;        /* promo highlight badge               rgb(214,9,66)   */

  /* --- Colors: neutrals --- */
  --ink: #333537;              /* dark headings                       rgb(51,53,55)   */
  --ink-2: #44474B;            /* section h2                          rgb(68,71,75)   */
  --gray-nav: #585D61;         /* bottom nav items                    rgb(88,93,97)   */
  --gray-brand: #5E6267;       /* product brand labels                rgb(94,98,103)  */
  --gray-text: #5D6467;        /* secondary text                      rgb(93,100,103) */
  --gray-muted: #717680;       /* rgb(113,118,122)                                   */
  --gray-hamb: #90979E;        /* hamburger bars                      rgb(144,151,158)*/
  --gray-border: #E2E9EE;      /* card borders                        rgb(226,233,238)*/
  --gray-dot: #C3CDD8;         /* inactive carousel dot (rgba16 .3 ~) rgb(195,205,216)*/
  --bg-gray: #F4F7F9;          /* alternating section bg              rgb(244,247,249)*/
  --white: #FFFFFF;
  --black: #000000;
  --dark-card: #3F3F3F;        /* promo card content panel            rgb(63,63,63)   */
  --footer-bg: #262729;        /* footer                              rgb(38,39,41)   */
  --overlay-50: rgba(0, 0, 0, .5);   /* modal overlay                            */
  --hero-scrim: rgba(0, 0, 0, .35);  /* hero slide text panel                    */
  --btn-border: rgba(27, 48, 82, .3);/* ghost button border                      */

  /* --- Typography --- */
  --font-main: 'mainFonts', 'mainFonts Fallback', Arial, sans-serif;
  --font-icons: 'FalabellaIcons', sans-serif;
  --fw-regular: 450;           /* site base weight (variable font)    */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-body: 16px;
  --fs-h2: 32px;               /* section titles, lh 44.8, ls -.64px  */
  --fs-hero: 40px;             /* hero/banner titles, lh 56, ls -.8px */

  /* --- Radii --- */
  --r-badge: 6px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-pill: 512px;
  --r-dot: 15px;

  /* --- Shadows --- */
  --shadow-card: 0 3px 6px 0 rgba(0, 51, 102, .05), 0 1px 1px 0 rgba(0, 51, 102, .05);
  --shadow-card-dark: 0 3px 6px 0 rgba(0, 0, 0, .05), 0 1px 1px 0 rgba(0, 0, 0, .05);
  --shadow-float: 0 0 0 .25px rgba(0, 0, 0, .3), 0 1px 1px 0 rgba(0, 51, 102, .05), 0 9px 18px 0 rgba(0, 51, 102, .05);

  /* --- Layout --- */
  --container-nav: 1366px;     /* nav inner max-width, padding 0 16   */
  --container-section: 1352px; /* carousels wrapper max-width         */
  --header-topbar-h: 40px;
  --header-middle-h: 72px;
  --header-bottom-h: 56px;

  /* --- Z-index scale --- */
  --z-arrows: 97;
  --z-megamenu: 100;
  --z-header: 900;
  --z-wsp: 999;
  --z-modal: 1002;

  /* --- Breakpoints (documentary; CSS vars not usable in media queries) ---
     desktop >= 1024px  (logo source switch, full nav)
     tablet  768–1023px
     mobile  < 768px    (hero mobile images, hamburger menu, bottom nav hidden)
     small   < 500px    (smaller hero image source)
  -- */
  --bp-desktop: 1024px;
  --bp-tablet: 768px;
  --bp-small: 500px;
}