:root {
  /* ── Colors ── */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Neutral / CoolGray scale */
  --color-neutral-12: #141414;
  --color-neutral-dark: #1E1E1E;
  --color-gray-90: #21272A;
  --color-gray-60: #697077;
  --color-gray-40: #A2A9B0;
  --color-gray-30: #C1C7CD;
  --color-gray-20: #DDE1E6;
  --color-gray-10: #F2F4F8;

  /* Brand palette — sourced from CommunityDX logo */
  --color-brand-navy:        #172C3D;   /* deep navy: wordmark + primary pins */
  --color-brand-navy-dark:   #0E1D29;   /* navy hover / gradient depth */
  --color-brand-teal:        #5CB39C;   /* bright teal: nodes + accents */
  --color-brand-teal-deep:   #165057;   /* deep teal: secondary pins */
  --color-brand-orange:      #E98C42;   /* warm orange: highlight accent */
  --color-brand-orange-dark: #C97233;   /* orange hover / border */

  /* Brand accent (legacy aliases now mapped to logo palette) */
  --color-accent-teal: var(--color-brand-navy);
  --color-accent-sage: var(--color-brand-teal);
  --color-accent-dark: var(--color-brand-navy-dark);
  --color-primary-90:  var(--color-brand-navy);

  /* Semantic */
  --color-success: #25A249;

  /* CTA / page background */
  --color-cta:      var(--color-brand-orange);       /* warm orange primary CTA */
  --color-cta-dark: var(--color-brand-orange-dark);  /* CTA hover + border */
  --color-bg:       #F1EADF;                          /* warm cream page canvas */
  --storefront-map-background:
    radial-gradient(circle at 18% 12%, rgba(23, 44, 61, 0.07), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(233, 140, 66, 0.06), transparent 24rem),
    radial-gradient(circle at 52% 86%, rgba(23, 44, 61, 0.035), transparent 30rem),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='384' viewBox='0 0 384 384'%3E%3Cg fill='%23172C3D' fill-opacity='0.055' font-family='IBM Plex Sans, Arial, sans-serif' font-size='10' letter-spacing='1.4'%3E%3Ctext x='18' y='28'%3E37.7749 N%3C/text%3E%3Ctext x='252' y='112'%3E122.4194 W%3C/text%3E%3Ctext x='32' y='236'%3E40.7128 N%3C/text%3E%3Ctext x='234' y='354'%3E74.0060 W%3C/text%3E%3C/g%3E%3Cg stroke='%23172C3D' stroke-opacity='0.04' stroke-width='1'%3E%3Cpath d='M96 0V384M192 0V384M288 0V384M0 96H384M0 192H384M0 288H384'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 384px 384px repeat,
    linear-gradient(rgba(23, 44, 61, 0.015) 1px, transparent 1px) 0 0 / 24px 24px repeat,
    linear-gradient(90deg, rgba(23, 44, 61, 0.015) 1px, transparent 1px) 0 0 / 24px 24px repeat,
    linear-gradient(rgba(23, 44, 61, 0.035) 1px, transparent 1px) 0 0 / 96px 96px repeat,
    linear-gradient(90deg, rgba(23, 44, 61, 0.035) 1px, transparent 1px) 0 0 / 96px 96px repeat,
    var(--color-bg);

  /* Gradients */
  --gradient-primary: linear-gradient(155deg, #172C3D 35%, #0E1D29 100%);
  --gradient-reverse: linear-gradient(161deg, #0E1D29 35%, #172C3D 100%);
  --gradient-dark-banner: linear-gradient(180deg, #172C3D 0%, #0E1D29 100%);
  --gradient-fade-green-down: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 100%);
  --gradient-fade-green-up: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 100%);

  /* ── Typography ── */
  --font-family: 'IBM Plex Sans', sans-serif;
  --font-family-heading: 'Roboto', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-size-hero: clamp(40px, 5vw, 64px);
  --font-size-section-title: clamp(28px, 3.5vw, 42px);
  --font-size-large-title: clamp(36px, 4vw, 54px);
  --font-size-card-title: clamp(20px, 2vw, 24px);
  --font-size-subtitle: clamp(18px, 1.8vw, 24px);
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-btn: 20px;
  --font-size-nav: 16px;
  --font-size-number: 20px;

  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.75;

  --letter-spacing-hero: -2.56px;
  --letter-spacing-subtitle: -0.96px;
  --letter-spacing-number: 1px;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ── Border Radius ── */
  --radius-btn: 0;
  --radius-browser: 0;
  --radius-card: 0;
  --radius-avatar: 0;
  --radius-sm: 0;

  /* ── Layout ── */
  --max-width: 1280px;
  --page-padding: 80px;

  /* ── Shadows ── */
  --shadow-browser: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px 0px rgba(0,0,0,0.3);
}