/* ==========================================================================
   DESIGN TOKENS — FinSmartHub Global Variables
   All colors, fonts, spacing, and sizing in one place.
   ========================================================================== */

:root {

  /* ── Brand Colors ────────────────────────────────────────────────────── */
  --color-primary:         #1A3A5C;
  --color-primary-light:   #2A5A8C;
  --color-primary-dark:    #0F2740;
  --color-primary-50:      #EBF5FF;
  --color-primary-100:     #D6EAFF;

  --color-accent:          #BE0027;
  --color-accent-light:    #E8334F;
  --color-accent-dark:     #8F001D;
  --color-accent-50:       #FFF0F2;

  --color-green:           #1B6B40;
  --color-green-light:     #28A060;
  --color-green-dark:      #104D2D;
  --color-green-50:        #EAF5EE;

  --color-gold:            #C9860A;
  --color-gold-light:      #E5A62E;
  --color-gold-dark:       #9A6608;
  --color-gold-50:         #FFF8E6;

  --color-sky:             #1E7CC8;
  --color-sky-light:       #4BA3E8;
  --color-sky-50:          #EBF5FF;

  --color-teal:            #0E7490;
  --color-teal-50:         #ECFEFF;

  --color-earth:           #7A4F2D;
  --color-earth-50:        #FDF3EC;

  /* ── Neutral Palette ─────────────────────────────────────────────────── */
  --color-white:           #FFFFFF;
  --color-cream:           #F7F5F0;
  --color-gray-50:         #FAFAF8;
  --color-gray-100:        #F0EDE8;
  --color-gray-200:        #E0DDD6;
  --color-gray-300:        #C8C5BD;
  --color-gray-400:        #9E9B93;
  --color-gray-500:        #75726A;
  --color-gray-600:        #5A5850;
  --color-gray-700:        #3D3B35;
  --color-gray-800:        #2A2925;
  --color-gray-900:        #1A1918;
  --color-black:           #111111;

  /* ── Semantic Colors ─────────────────────────────────────────────────── */
  --color-success:         var(--color-green);
  --color-success-bg:      var(--color-green-50);
  --color-warning:         var(--color-gold);
  --color-warning-bg:      var(--color-gold-50);
  --color-danger:          var(--color-accent);
  --color-danger-bg:       var(--color-accent-50);
  --color-info:            var(--color-sky);
  --color-info-bg:         var(--color-sky-50);

  /* ── Background Colors ───────────────────────────────────────────────── */
  --bg-body:               var(--color-white);
  --bg-alt:                var(--color-cream);
  --bg-dark:               var(--color-primary-dark);
  --bg-card:               var(--color-white);

  /* ── Text Colors ─────────────────────────────────────────────────────── */
  --text-heading:          var(--color-primary-dark);
  --text-body:             var(--color-gray-700);
  --text-muted:            var(--color-gray-500);
  --text-light:            var(--color-white);
  --text-link:             var(--color-primary);
  --text-link-hover:       var(--color-accent);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-heading:          'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:             'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --fs-display:            clamp(2.5rem, 5vw, 4rem);
  --fs-h1:                 clamp(2rem, 4vw, 3.25rem);
  --fs-h2:                 clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:                 clamp(1.375rem, 2.5vw, 2rem);
  --fs-h4:                 clamp(1.125rem, 2vw, 1.5rem);
  --fs-h5:                 1.125rem;
  --fs-h6:                 1rem;
  --fs-body-lg:            1.125rem;
  --fs-body:               1rem;
  --fs-body-sm:            0.875rem;
  --fs-caption:            0.8125rem;
  --fs-badge:              0.75rem;

  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;

  --lh-tight:              1.2;
  --lh-heading:            1.3;
  --lh-body:               1.7;

  --ls-tight:              -0.02em;
  --ls-normal:             0;
  --ls-wide:               0.04em;
  --ls-caps:               0.08em;

  /* ── Spacing Scale ───────────────────────────────────────────────────── */
  --space-0:               0;
  --space-1:               0.25rem;    /* 4px  */
  --space-2:               0.5rem;     /* 8px  */
  --space-3:               0.75rem;    /* 12px */
  --space-4:               1rem;       /* 16px */
  --space-5:               1.25rem;    /* 20px */
  --space-6:               1.5rem;     /* 24px */
  --space-8:               2rem;       /* 32px */
  --space-10:              2.5rem;     /* 40px */
  --space-12:              3rem;       /* 48px */
  --space-16:              4rem;       /* 64px */
  --space-20:              5rem;       /* 80px */
  --space-24:              6rem;       /* 96px */
  --space-32:              8rem;       /* 128px */

  /* ── Section Spacing ─────────────────────────────────────────────────── */
  --section-space-none:    0;
  --section-space-sm:      var(--space-12);
  --section-space-md:      var(--space-16);
  --section-space-lg:      var(--space-20);
  --section-space-xl:      var(--space-24);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max:         1280px;
  --container-narrow:      900px;
  --container-wide:        1440px;
  --container-padding:     1.5rem;

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-2xl:            24px;
  --radius-full:           9999px;

  --border-width:          1px;
  --border-color:          var(--color-gray-200);
  --border:                var(--border-width) solid var(--border-color);

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:             0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:             0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:             0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-card:           0 2px 8px rgba(26, 58, 92, 0.06);
  --shadow-card-hover:     0 8px 24px rgba(26, 58, 92, 0.12);

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition-fast:       150ms ease;
  --transition-base:       250ms ease;
  --transition-slow:       400ms ease;
  --transition-spring:     400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
  --z-below:               -1;
  --z-base:                1;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-overlay:             300;
  --z-modal:               400;
  --z-toast:               500;

  /* ── Header ──────────────────────────────────────────────────────────── */
  --header-height:         80px;
  --header-height-mobile:  64px;
}

/* ── Responsive Breakpoint Tokens (used via media queries) ─────────── */
/* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1440px     */