/* =========================================================================
   AD Group / Apartments & Developments; Colors & Type
   Source: Blueprint Design System (Foundations / Typography & Colours)
   ------------------------------------------------------------------------
   Three-tier color system: Primitives → Alias → Mapping.
   Always APPLY Mapping tokens in designs. Do not use Primitives directly.
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------
   Heading: Aeonik Pro; licensed full family, webfont woff2 in /fonts.
     Licensed cut installed 13/07/2026; supersedes the earlier TRIAL otf.

   Body / Subheading / Label: Atkinson Hyperlegible Next
     Bundled as a single variable woff2 from Google Fonts.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/AeonikPro-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AeonikPro-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/AeonikPro-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/AeonikPro-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Aeonik Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/AeonikPro-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./fonts/AtkinsonHyperlegibleNext-VF.woff2') format('woff2-variations'),
       url('./fonts/AtkinsonHyperlegibleNext-VF.woff2') format('woff2');
}

/* Newsreader; editorial serif accent. Italic only, self-hosted latin subset.
   Used sparingly for emphasis and pull quotes; never for UI, labels or body. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Newsreader-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/Newsreader-MediumItalic.woff2') format('woff2');
}

:root {
  /* =====================================================================
     PRIMITIVES; raw hues, do not use directly in components
     ===================================================================== */

  /* Grayscale */
  --color-grayscale-black: #000000;
  --color-grayscale-1000:  #101017;
  --color-grayscale-900:   #21222C;
  --color-grayscale-800:   #333541;
  --color-grayscale-700:   #464856;
  --color-grayscale-600:   #595C69; /* base */
  --color-grayscale-500:   #80828F;
  --color-grayscale-400:   #A8A9B3;
  --color-grayscale-300:   #D1D1D7;
  --color-grayscale-200:   #EAEAEE;
  --color-grayscale-100:   #FAFAFB;
  --color-grayscale-white: #FFFFFF;

  /* Grayscale Alpha / Dark; built on #21222C */
  --color-grayscale-alpha-dark-A88: rgba(33, 34, 44, 0.88);
  --color-grayscale-alpha-dark-A80: rgba(33, 34, 44, 0.80);
  --color-grayscale-alpha-dark-A72: rgba(33, 34, 44, 0.72);
  --color-grayscale-alpha-dark-A64: rgba(33, 34, 44, 0.64);
  --color-grayscale-alpha-dark-A56: rgba(33, 34, 44, 0.56);
  --color-grayscale-alpha-dark-A48: rgba(33, 34, 44, 0.48);
  --color-grayscale-alpha-dark-A40: rgba(33, 34, 44, 0.40); /* base */
  --color-grayscale-alpha-dark-A32: rgba(33, 34, 44, 0.32);
  --color-grayscale-alpha-dark-A24: rgba(33, 34, 44, 0.24);
  --color-grayscale-alpha-dark-A16: rgba(33, 34, 44, 0.16);
  --color-grayscale-alpha-dark-A12: rgba(33, 34, 44, 0.12);
  --color-grayscale-alpha-dark-A08: rgba(33, 34, 44, 0.08);

  /* Grayscale Alpha / Light; built on #FFFFFF */
  --color-grayscale-alpha-light-A88: rgba(255, 255, 255, 0.88);
  --color-grayscale-alpha-light-A80: rgba(255, 255, 255, 0.80);
  --color-grayscale-alpha-light-A72: rgba(255, 255, 255, 0.72);
  --color-grayscale-alpha-light-A64: rgba(255, 255, 255, 0.64);
  --color-grayscale-alpha-light-A56: rgba(255, 255, 255, 0.56);
  --color-grayscale-alpha-light-A48: rgba(255, 255, 255, 0.48);
  --color-grayscale-alpha-light-A40: rgba(255, 255, 255, 0.40); /* base */
  --color-grayscale-alpha-light-A32: rgba(255, 255, 255, 0.32);
  --color-grayscale-alpha-light-A24: rgba(255, 255, 255, 0.24);
  --color-grayscale-alpha-light-A16: rgba(255, 255, 255, 0.16);
  --color-grayscale-alpha-light-A12: rgba(255, 255, 255, 0.12);
  --color-grayscale-alpha-light-A08: rgba(255, 255, 255, 0.08);

  /* Blue (brand hue) */
  --color-blue-900: #000D3D;
  --color-blue-800: #00216E;
  --color-blue-700: #00399D;
  --color-blue-600: #0054B9;
  --color-blue-500: #0170CB; /* base */
  --color-blue-400: #3B8EE2;
  --color-blue-300: #75AEF2;
  --color-blue-200: #B0CEFC;
  --color-blue-100: #EBF2FF;

  /* Green */
  --color-green-900: #00391B;
  --color-green-800: #005E2A;
  --color-green-700: #007C36;
  --color-green-600: #009341;
  --color-green-500: #0DA34B; /* base */
  --color-green-400: #3BC076;
  --color-green-300: #73D9A1;
  --color-green-200: #ACECCA;
  --color-green-100: #E6FAEF;

  /* Red */
  --color-red-900: #3D0000;
  --color-red-800: #6E0000;
  --color-red-700: #9E0000;
  --color-red-600: #CD0005;
  --color-red-500: #E41326; /* base */
  --color-red-400: #F63C47;
  --color-red-300: #FF7373;
  --color-red-200: #FFACAC;
  --color-red-100: #FFE6E6;

  /* Orange */
  --color-orange-900: #332100;
  --color-orange-800: #663800;
  --color-orange-700: #994900;
  --color-orange-600: #C85700;
  --color-orange-500: #DF6400; /* base */
  --color-orange-400: #F38C39;
  --color-orange-300: #FFB373;
  --color-orange-200: #FFD6AC;
  --color-orange-100: #FFF4E6;

  /* =====================================================================
     ALIAS; semantic meaning. Don't use directly in components either.
     ===================================================================== */

  /* Brand (= Blue) */
  --alias-brand-900: var(--color-blue-900);
  --alias-brand-800: var(--color-blue-800);
  --alias-brand-700: var(--color-blue-700);
  --alias-brand-600: var(--color-blue-600);
  --alias-brand-500: var(--color-blue-500);
  --alias-brand-400: var(--color-blue-400);
  --alias-brand-300: var(--color-blue-300);
  --alias-brand-200: var(--color-blue-200);
  --alias-brand-100: var(--color-blue-100);

  /* Neutral (= Grayscale) */
  --alias-neutral-black: var(--color-grayscale-black);
  --alias-neutral-1000:  var(--color-grayscale-1000);
  --alias-neutral-900:   var(--color-grayscale-900);
  --alias-neutral-800:   var(--color-grayscale-800);
  --alias-neutral-700:   var(--color-grayscale-700);
  --alias-neutral-600:   var(--color-grayscale-600);
  --alias-neutral-500:   var(--color-grayscale-500);
  --alias-neutral-400:   var(--color-grayscale-400);
  --alias-neutral-300:   var(--color-grayscale-300);
  --alias-neutral-200:   var(--color-grayscale-200);
  --alias-neutral-100:   var(--color-grayscale-100);
  --alias-neutral-white: var(--color-grayscale-white);

  /* Informative / Positive / Warning / Negative */
  --alias-informative-100: var(--color-blue-100);
  --alias-informative-500: var(--color-blue-500);
  --alias-informative-700: var(--color-blue-700);
  --alias-positive-100:    var(--color-green-100);
  --alias-positive-500:    var(--color-green-500);
  --alias-positive-700:    var(--color-green-700);
  --alias-warning-100:     var(--color-orange-100);
  --alias-warning-500:     var(--color-orange-500);
  --alias-warning-700:     var(--color-orange-700);
  --alias-negative-100:    var(--color-red-100);
  --alias-negative-500:    var(--color-red-500);
  --alias-negative-600:    var(--color-red-600);
  --alias-negative-700:    var(--color-red-700);

  /* =====================================================================
     MAPPING; apply these in designs.
     ===================================================================== */

  /* Content (text + icons) */
  --content-primary:           var(--alias-neutral-1000);
  --content-secondary:         var(--alias-neutral-800);
  --content-tertiary:          var(--alias-neutral-600);
  --content-primary-inverse:   var(--alias-neutral-white);
  --content-secondary-inverse: var(--color-grayscale-alpha-light-A80);
  --content-tertiary-inverse:  var(--color-grayscale-alpha-light-A64);
  --content-disabled:          var(--alias-neutral-300);
  --content-brand:             var(--alias-brand-500);
  --content-brand-strong:      var(--alias-brand-800);
  --content-positive-strong:    var(--alias-positive-700);
  --content-warning-strong:     var(--alias-warning-700);
  --content-negative-strong:    var(--alias-negative-700);
  --content-informative-strong: var(--alias-informative-700);
  --content-link:              var(--alias-brand-500);
  --content-link-hover:        var(--alias-brand-700);
  --content-link-pressed:      var(--alias-brand-800);
  --content-informative:       var(--alias-informative-500);
  --content-warning:           var(--alias-warning-500);
  --content-negative:          var(--alias-negative-500);
  --content-negative-hover:    var(--alias-negative-600);
  --content-negative-pressed:  var(--alias-negative-700);
  --content-positive:          var(--alias-positive-500);

  /* Background (page / sections) */
  --background-primary:   var(--alias-neutral-white);
  --background-secondary: var(--alias-neutral-100);

  /* Surface (cards, modals, panels) */
  --surface-primary:           var(--alias-neutral-white);
  --surface-primary-hover:     var(--color-grayscale-alpha-dark-A08);
  --surface-primary-pressed:   var(--color-grayscale-alpha-dark-A16);
  --surface-secondary:         var(--alias-neutral-200);
  --surface-disabled:          var(--alias-neutral-300);
  --surface-inverse:           var(--alias-neutral-1000);
  --surface-inverse-hover:     var(--color-grayscale-alpha-light-A24);
  --surface-inverse-pressed:   var(--color-grayscale-alpha-light-A40);
  --surface-brand:             var(--alias-brand-500);
  --surface-brand-hover:       var(--alias-brand-700);
  --surface-brand-pressed:     var(--alias-brand-800);
  --surface-brand-subtle:      var(--alias-brand-100);
  --surface-informative:        var(--alias-informative-500);
  --surface-informative-subtle: var(--alias-informative-100);
  --surface-neutral:            var(--alias-neutral-500);
  --surface-neutral-subtle:     var(--alias-neutral-100);
  --surface-positive:           var(--alias-positive-500);
  --surface-positive-subtle:    var(--alias-positive-100);
  --surface-warning:            var(--alias-warning-500);
  --surface-warning-subtle:     var(--alias-warning-100);
  --surface-negative:           var(--alias-negative-500);
  --surface-negative-hover:     var(--alias-negative-600);
  --surface-negative-pressed:   var(--alias-negative-700);
  --surface-negative-subtle:    var(--alias-negative-100);

  /* Border */
  --border-subtle:      var(--alias-neutral-200);
  --border-light:       var(--alias-neutral-300);
  --border-medium:      var(--alias-neutral-400);
  --border-dark:        var(--alias-neutral-1000);
  --border-inverse:     var(--alias-neutral-white);
  --border-brand:       var(--alias-brand-500);
  --border-informative: var(--alias-informative-500);
  --border-neutral:     var(--alias-neutral-500);
  --border-positive:    var(--alias-positive-500);
  --border-warning:     var(--alias-warning-500);
  --border-negative:    var(--alias-negative-500);

  /* Overlay */
  --overlay-dark:  var(--color-grayscale-alpha-dark-A40);
  --overlay-light: var(--color-grayscale-alpha-light-A40);

  /* =====================================================================
     SHAPE; radii + border widths
     ===================================================================== */

  --radius-sm:   4px;   /* inputs, tags, gallery */
  --radius-md:   8px;   /* reserved; currently unused */
  --radius-lg:   12px;  /* cards, callouts (default) */
  --radius-xl:   16px;  /* maps, modals, large overlays */
  --radius-full: 999px; /* avatars, pill buttons, chips */

  --border-width-sm: 1px;
  --border-width-md: 2px; /* focus / selected */
  --border-width-lg: 4px; /* strong emphasis (rare) */

  /* =====================================================================
     ELEVATION; shadow scale
     ===================================================================== */

  --shadow-sm:  0 1px 2px rgba(33, 34, 44, 0.06), 0 1px 1px rgba(33, 34, 44, 0.04);
  --shadow-md:  0 2px 4px rgba(33, 34, 44, 0.08), 0 1px 2px rgba(33, 34, 44, 0.06);
  --shadow-lg:  0 4px 12px rgba(33, 34, 44, 0.08), 0 2px 4px rgba(33, 34, 44, 0.04);
  --shadow-xl:  0 8px 24px rgba(33, 34, 44, 0.10), 0 4px 8px rgba(33, 34, 44, 0.06);
  --shadow-2xl: 0 16px 48px rgba(33, 34, 44, 0.16), 0 8px 16px rgba(33, 34, 44, 0.08);

  /* =====================================================================
     BLURS; used with overlay tints for layering
     ===================================================================== */

  --blur-sm: 8px;   /* imagery still legible */
  --blur-md: 16px;  /* text legibility */
  --blur-lg: 32px;  /* maximum contrast over busy bg */

  /* =====================================================================
     SPACING; 4pt grid
     ===================================================================== */

  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   20px;
  --space-2xl:  24px;
  --space-3xl:  32px;
  --space-4xl:  40px;
  --space-5xl:  48px;
  --space-6xl:  56px;
  --space-7xl:  64px;
  --space-8xl:  72px;
  --space-9xl:  80px;
  --space-10xl: 96px;

  /* =====================================================================
     LAYOUT; grid containers
     ===================================================================== */

  --layout-desktop-canvas:    1440px;
  --layout-desktop-container: 1248px;
  --layout-desktop-content:   1184px;
  --layout-desktop-gutter:    32px;
  --layout-desktop-columns:   12;

  --layout-mobile-canvas:     440px;
  --layout-mobile-container:  440px;
  --layout-mobile-content:    408px;
  --layout-mobile-gutter:     16px;
  --layout-mobile-columns:    4;

  /* =====================================================================
     TYPOGRAPHY; font families
     ===================================================================== */

  --font-heading: 'Aeonik Pro', system-ui, sans-serif;
  --font-body:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif; /* editorial accent; italic, sparing */

  /* Semantic font-size + line-height + tracking pairs (desktop @ 1440) */

  /* Editorial serif accent (Newsreader · italic · used sparingly, never for UI/body).
     Tracking sits near 0; serif italics don't want the heading's negative tracking. */
  --type-accent-2xl: italic 400 40px/48px var(--font-serif);
  --type-accent-xl:  italic 400 32px/40px var(--font-serif);
  --type-accent-lg:  italic 400 28px/36px var(--font-serif);
  --type-accent-md:  italic 400 24px/32px var(--font-serif);
  --type-accent-sm:  italic 400 20px/30px var(--font-serif);

  /* Heading (Aeonik Pro · Demibold 600 · tracking -0.5px) */
  --type-heading-2xl: 600 40px/48px var(--font-heading);
  --type-heading-xl:  600 36px/44px var(--font-heading);
  --type-heading-lg:  600 32px/40px var(--font-heading);
  --type-heading-md:  600 28px/36px var(--font-heading);
  --type-heading-sm:  600 24px/32px var(--font-heading);
  --type-heading-tracking: -0.5px;

  /* Subheading (Atkinson HL Next · tracking -0.25px) */
  --type-subheading-lg: 600 20px/28px var(--font-body);   /* demibold */
  --type-subheading-md: 600 18px/24px var(--font-body);   /* demibold */
  --type-subheading-sm: 600 16px/24px var(--font-body);   /* semibold */
  --type-subheading-tracking: -0.25px;

  /* Body (Atkinson HL Next · tracking 0) */
  --type-body-lg-regular:   400 18px/24px var(--font-body);
  --type-body-lg-medium:    500 18px/24px var(--font-body);
  --type-body-lg-semibold:  600 18px/24px var(--font-body);
  --type-body-lg-bold:      700 18px/24px var(--font-body);
  --type-body-md-regular:   400 16px/24px var(--font-body);
  --type-body-md-medium:    500 16px/24px var(--font-body);
  --type-body-md-semibold:  600 16px/24px var(--font-body);
  --type-body-md-bold:      700 16px/24px var(--font-body);
  --type-body-sm-regular:   400 14px/20px var(--font-body);
  --type-body-sm-medium:    500 14px/20px var(--font-body);
  --type-body-sm-semibold:  600 14px/20px var(--font-body);
  --type-body-sm-bold:      700 14px/20px var(--font-body);

  /* Label (Atkinson HL Next · tracking 0) */
  --type-label-lg-regular:  400 16px/24px var(--font-body);
  --type-label-lg-medium:   500 16px/24px var(--font-body);
  --type-label-lg-semibold: 600 16px/24px var(--font-body);
  --type-label-lg-bold:     700 16px/24px var(--font-body);
  --type-label-md-regular:  400 14px/20px var(--font-body);
  --type-label-md-medium:   500 14px/20px var(--font-body);
  --type-label-md-semibold: 600 14px/20px var(--font-body);
  --type-label-md-bold:     700 14px/20px var(--font-body);
  --type-label-sm-regular:  400 12px/16px var(--font-body);
  --type-label-sm-medium:   500 12px/16px var(--font-body);
  --type-label-sm-semibold: 600 12px/16px var(--font-body);
  --type-label-sm-bold:     700 12px/16px var(--font-body);
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES; opinionated defaults
   ========================================================================= */

html, body {
  background: var(--background-primary);
  color: var(--content-primary);
  font: var(--type-body-md-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font: var(--type-heading-2xl);
  letter-spacing: var(--type-heading-tracking);
  color: var(--content-primary);
  margin: 0;
}
h2, .h2 {
  font: var(--type-heading-xl);
  letter-spacing: var(--type-heading-tracking);
  color: var(--content-primary);
  margin: 0;
}
h3, .h3 {
  font: var(--type-heading-lg);
  letter-spacing: var(--type-heading-tracking);
  color: var(--content-primary);
  margin: 0;
}
h4, .h4 {
  font: var(--type-heading-md);
  letter-spacing: var(--type-heading-tracking);
  color: var(--content-primary);
  margin: 0;
}
h5, .h5 {
  font: var(--type-heading-sm);
  letter-spacing: var(--type-heading-tracking);
  color: var(--content-primary);
  margin: 0;
}
h6, .h6 {
  font: var(--type-subheading-md);
  letter-spacing: var(--type-subheading-tracking);
  color: var(--content-primary);
  margin: 0;
}

p, .body {
  font: var(--type-body-md-regular);
  color: var(--content-secondary);
  margin: 0;
}
small, .caption {
  font: var(--type-body-sm-regular);
  color: var(--content-tertiary);
}
.label {
  font: var(--type-label-md-medium);
  color: var(--content-primary);
}

a {
  color: var(--content-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
a:hover { color: var(--content-link-hover); }
a:active { color: var(--content-link-pressed); }

/* ===========================================================================
   FOCUS · MOTION · RESPONSIVE · THEME; system-wide behaviour
   ========================================================================= */

/* Focus; always a 2px brand ring, never suppressed. :where() keeps the
   specificity at 0 so components can restyle their box without losing this. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: 2px;
}

/* Motion; transitions are 120–240ms by spec; collapse them for anyone who
   has asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile; at the 440px breakpoint headings step down one rung. The ramp lives
   in custom properties, so redefining them here cascades to every heading. */
@media (max-width: 440px) {
  :root {
    --type-heading-2xl: 600 36px/44px var(--font-heading);
    --type-heading-xl:  600 32px/40px var(--font-heading);
    --type-heading-lg:  600 28px/36px var(--font-heading);
    --type-heading-md:  600 24px/32px var(--font-heading);
    --type-heading-sm:  600 20px/28px var(--font-heading);
  }
}

/* Dark theme; opt in with <html data-theme="dark"> (the preview index and
   component library ship a toggle). Only Mapping tokens flip, so every
   component built on Mapping tokens goes dark for free. To follow the OS
   automatically, mirror this block in:
     @media (prefers-color-scheme: dark) { :root:not([data-theme]) { … } } */
[data-theme="dark"] {
  color-scheme: dark;

  /* Background + surface */
  --background-primary:         var(--alias-neutral-1000);
  --background-secondary:       var(--alias-neutral-900);
  --surface-primary:            var(--alias-neutral-900);
  --surface-primary-hover:      var(--color-grayscale-alpha-light-A08);
  --surface-primary-pressed:    var(--color-grayscale-alpha-light-A16);
  --surface-secondary:          var(--alias-neutral-800);
  --surface-disabled:           var(--alias-neutral-700);
  --surface-inverse:            var(--alias-neutral-white);
  --surface-brand-subtle:       var(--color-blue-800);
  --surface-positive-subtle:    var(--color-green-900);
  --surface-warning-subtle:     var(--color-orange-900);
  --surface-negative-subtle:    var(--color-red-900);
  --surface-informative-subtle: var(--color-blue-900);

  /* Content */
  --content-primary:            var(--alias-neutral-white);
  --content-secondary:          var(--color-grayscale-alpha-light-A80);
  --content-tertiary:           var(--color-grayscale-alpha-light-A56);
  --content-primary-inverse:    var(--alias-neutral-1000);
  --content-secondary-inverse:  var(--color-grayscale-alpha-dark-A80);
  --content-tertiary-inverse:   var(--color-grayscale-alpha-dark-A64);
  --content-disabled:           var(--alias-neutral-600);
  --content-brand:              var(--alias-brand-300);
  --content-brand-strong:       var(--alias-brand-200);
  --content-link:               var(--alias-brand-300);
  --content-link-hover:         var(--alias-brand-200);
  --content-link-pressed:       var(--alias-brand-100);
  --content-positive-strong:    var(--color-green-300);
  --content-warning-strong:     var(--color-orange-300);
  --content-negative-strong:    var(--color-red-300);
  --content-informative-strong: var(--color-blue-300);

  /* Border */
  --border-subtle: var(--alias-neutral-800);
  --border-light:  var(--alias-neutral-700);
  --border-medium: var(--alias-neutral-600);
  --border-dark:   var(--alias-neutral-white);

  /* Elevation; deepen shadows so cards still read against dark surfaces */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 6px 16px rgba(0, 0, 0, 0.50);
  --shadow-xl:  0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 18px 52px rgba(0, 0, 0, 0.60);
}