/*--------------------------------------------------------------
  AMFM Design Tokens & Base Styles
  
  Global CSS variables and foundation styles used across components.
  This file loads first; other component files depend on it.
  
  @since 2026-01-23
--------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
   Global Design Tokens
   These are available to all components via :root scope
   ----------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --amfm-brand-500: #c07858;
  --amfm-brand-600: #aa6140;
  --amfm-brand-700: #8f5236;
  --amfm-brand-800: #683b27;
  
  /* Neutral Colors */
  --amfm-neutral-50: #f9fafb;
  --amfm-neutral-100: #f7f7f7;
  --amfm-neutral-200: #e9eaeb;
  --amfm-neutral-300: #d5d7da;
  --amfm-neutral-400: #a4a7ae;
  --amfm-neutral-500: #717680;
  --amfm-neutral-600: #535862;
  --amfm-neutral-700: #414651;
  --amfm-neutral-800: #181d27;
  --amfm-neutral-900: #0c0e12;
  
  /* Success Colors */
  --amfm-success-50: #ecfdf3;
  --amfm-success-200: #abefc6;
  --amfm-success-700: #067647;
  
  /* Text Colors */
  --amfm-text-primary: #181d27;
  --amfm-text-secondary: #414651;
  --amfm-text-tertiary: #535862;
  --amfm-text-muted: #94979c;
  --amfm-text-disabled: #a4a7ae;
  --amfm-text-white: #ffffff;
  --amfm-text-brand: #894e34;
  
  /* Background Colors */
  --amfm-bg-primary: #ffffff;
  --amfm-bg-dark: #0c0e12;
  --amfm-bg-dark-alt: #13161b;
  
  /* Border Colors */
  --amfm-border-primary: rgba(0, 0, 0, 0.08);
  --amfm-border-secondary: #e9eaeb;
  --amfm-border-dark: #22262f;
  
  /* Typography - Font Families */
  --amfm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --amfm-font-display: 'Financier Display', Georgia, serif;
  
  /* Typography - Font Sizes */
  --amfm-text-xs: 12px;
  --amfm-text-sm: 14px;
  --amfm-text-base: 16px;
  --amfm-text-lg: 18px;
  --amfm-text-xl: 20px;
  --amfm-text-2xl: 24px;
  --amfm-text-3xl: 28px;
  --amfm-text-4xl: 36px;
  --amfm-text-5xl: 48px;
  
  /* Typography - Line Heights */
  --amfm-leading-xs: 18px;
  --amfm-leading-sm: 20px;
  --amfm-leading-base: 24px;
  --amfm-leading-lg: 28px;
  --amfm-leading-xl: 32px;
  --amfm-leading-2xl: 36px;
  --amfm-leading-3xl: 44px;
  --amfm-leading-4xl: 56px;
  
  /* Spacing Scale */
  --amfm-spacing-xxs: 2px;
  --amfm-spacing-xs: 4px;
  --amfm-spacing-sm: 6px;
  --amfm-spacing-md: 8px;
  --amfm-spacing-lg: 12px;
  --amfm-spacing-xl: 16px;
  --amfm-spacing-2xl: 20px;
  --amfm-spacing-3xl: 24px;
  --amfm-spacing-4xl: 32px;
  
  /* Border Radius */
  --amfm-radius-sm: 6px;
  --amfm-radius-md: 8px;
  --amfm-radius-lg: 12px;
  --amfm-radius-xl: 16px;
  --amfm-radius-full: 9999px;
  
  /* Shadows */
  --amfm-shadow-sm: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  --amfm-shadow-md: 
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 12px 16px -4px rgba(10, 13, 18, 0.08);
  --amfm-shadow-card: 
    0px 12px 16px -4px rgba(10, 13, 18, 0.08),
    0px 4px 6px -2px rgba(10, 13, 18, 0.03),
    0px 2px 2px -1px rgba(10, 13, 18, 0.04);
  
  /* Icon Sizes */
  --amfm-icon-sm: 16px;
  --amfm-icon-md: 20px;
  --amfm-icon-lg: 24px;
  
  /* Transitions */
  --amfm-transition-fast: 0.15s ease;
  --amfm-transition-normal: 0.2s ease;
}

/* -----------------------------------------------------------------------------
   Dark Theme Gradients (used by sidebar and mobile menu)
   ----------------------------------------------------------------------------- */
:root {
  --amfm-gradient-dark: linear-gradient(
    160deg,
    #0b0b0d 0%,
    #0f0f11 20%,
    #3b3d42 45%,
    #0c0e12 100%
  );
  
  --amfm-gradient-dark-mobile: linear-gradient(
    160deg,
    #0b0b0d 0%,
    #0f0f11 20%,
    #2a2c30 45%,
    #0c0e12 100%
  );
  
  --amfm-gradient-active: linear-gradient(
    90deg,
    rgba(192, 120, 88, 0.35) 0%,
    rgba(104, 59, 39, 0.35) 100%
  );
  
  --amfm-gradient-hero-overlay: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* -----------------------------------------------------------------------------
   Utility Classes
   Drop these on any element (e.g. Elementor text widget CSS classes field)
   ----------------------------------------------------------------------------- */

/* Force Financier Display font, overriding Elementor inline styles */
.text-financier,
.text-financier * {
  font-family: var(--amfm-font-display, 'Financier Display', Georgia, serif) !important;
}