/**
 * BGC — token bridge.
 *
 * ui.css is this theme's stylesheet and loads LAST, so it is the final word.
 * This file exists only to re-point the inherited app.css token system at
 * BGC's palette and type, so any surface ui.css has not reached yet (account,
 * architect, checkout, the AI visualiser) still reads as this storefront
 * rather than as the Milano default.
 *
 * Palette sampled from bgc.in's own stylescape — blue #19A4F6, deep #083B54,
 * amber #F6931A. --theme-* comes from theme.json via the layout.
 */

:root {
  /* app.css colour system */
  --color-primary:      var(--theme-primary, #19A4F6);
  --color-primary-rgb:  25, 164, 246;
  --color-link:         var(--theme-primary-dark, #1170A8);
  --color-link-hover:   var(--theme-primary, #19A4F6);
  --color-heading:      #0F2733;
  --color-heading-rgb:  15, 39, 51;
  --color-text:         #33505F;
  --color-text-rgb:     51, 80, 95;
  --color-dark:         var(--theme-secondary, #083B54);
  --color-background:   #F5FAFD;
  --color-border:       #DDEAF2;
  --color-white:        #FFFFFF;

  --grey-50:  #F5FAFD;
  --grey-100: #EDF5FA;
  --grey-200: #DDEAF2;
  --grey-300: #C0D7E4;
  --grey-500: #8CA4B1;
  --grey-700: #5E7784;
  --grey-900: #0F2733;
  /* NOTE: app.css uses --grey-color as a SURFACE (#f8f7f5), not as a text
     grey — the FAQ page paints its whole body with it. Setting it to a
     mid grey turned that page into a muddy slab. Keep it a light tint. */
  --grey-color: #F5FAFD;

  /* type — Rajdhani for headings, Poppins for body, both from theme.json */
  --body-font:    var(--font-primary, "Poppins", system-ui, sans-serif);
  --heading-font: var(--font-heading, "Rajdhani", system-ui, sans-serif);
  --menu-font:    var(--font-primary, "Poppins", system-ui, sans-serif);
  --btn-font:     var(--font-primary, "Poppins", system-ui, sans-serif);
  --body-weight:  400;
  --heading-weight: 700;
  --heading-letter-spacing: .005em;
  --heading-text-transform: none;

  /* controls — the same metric ui.css declares, so an unreached surface
     still lines up with the rest of the site */
  --btn-radius: 8px;
  --btn-padding-x: 2rem;
  --btn-padding-y: 0;
  --btn-text-transform: none;
  --btn-letter-spacing: .01em;
  --btn-primary-bg-color: var(--theme-primary, #19A4F6);
  --btn-primary-color: #FFFFFF;
  --btn-primary-hover-bg-color: var(--theme-primary-dark, #1170A8);
  --btn-primary-hover-color: #FFFFFF;
  --btn-outline-bg-color: #FFFFFF;
  --btn-outline-border-color: #C0D7E4;
  --btn-outline-color: #0F2733;
  --btn-link-color: var(--theme-primary-dark, #1170A8);
  --btn-link-hover-color: var(--theme-primary, #19A4F6);

  --input-border-radius: 8px;
  --input-height: 4.4rem;
  --input-color: #0F2733;
  --input-placeholder-color: #8CA4B1;
  --inputs-border-width: 1px;

  --height-header: 7.2rem;
  --height-topbar: 3.6rem;
  --page-width: 1320px;
  --fluid-container-width: 1320px;
}