/* Location Ledger Design Tokens - Matched to Webflow Production */

:root {
  /* Page Settings (Webflow tokens) */
  --page-bg: #000000;
  --heading-fonts: 'Space Grotesk', sans-serif;
  --paragraph-font: 'Space Grotesk', sans-serif;
  --heading-color: #ffffff;
  --paragraph-color: rgba(255, 255, 255, 0.8);
  --text-color-grey: #dfdfdf;
  
  /* Aliased tokens for backwards compatibility */
  --color-bg: #000000;
  --color-heading: #ffffff;
  --color-paragraph: rgba(255, 255, 255, 0.8);
  --color-text-grey: #dfdfdf;

  /* Blue Scale */
  --blue-100: #cee9fe;
  --blue-200: #9ed0fd;
  --blue-300: #6eb1fb;
  --blue-400: #4a96f7;
  --blue-500: #106af3;
  --blue-600: #0c52c2;
  --blue-700: #093d91;
  --blue-800: #052860;
  --blue-900: #02142f;

  /* Button Colors - Primary is blue #106af3 */
  --btn-color-01: #106af3;
  --btn-color-02: #243b92;
  --btn-primary: #106af3;
  --btn-primary-hover: #114ba3;
  --btn-primary-border: #6eb1fb;
  --btn-secondary-bg: rgba(0, 0, 0, 0.3);
  --btn-secondary-stroke: rgba(116, 171, 255, 0.54);

  /* Element Colors */
  --element-color: #000000;
  --stroke-color: rgba(0, 0, 0, 0.25);
  --stroke-white: #323232;
  --stroke-gray: #232323;

  /* Semantic Colors */
  --color-success: #00cd50;
  --color-danger: #e30147;
  --color-warning: #fff569;
  --color-info: #b1cede;

  /* Typography - Webflow Exact Values */
  --font-family: 'Space Grotesk', sans-serif;
  
  /* H1: 4rem, weight 700, line-height 0.9 */
  --h1-size: 4rem;
  --h1-weight: 700;
  --h1-line-height: 0.9;
  
  /* H2: 3.5rem, weight 400, line-height 1.2 */
  --h2-size: 3.5rem;
  --h2-weight: 400;
  --h2-line-height: 1.2;
  
  /* H3: 38px, weight 400, line-height 1.2 */
  --h3-size: 38px;
  --h3-weight: 400;
  --h3-line-height: 1.2;
  
  /* H4: 34px, weight 400, line-height 1.2 */
  --h4-size: 34px;
  --h4-weight: 400;
  --h4-line-height: 1.2;
  
  /* H5: 32px, weight 400, line-height 1.2 */
  --h5-size: 32px;
  --h5-weight: 400;
  --h5-line-height: 1.2;
  
  /* H6: 26px, weight 400, line-height 160% */
  --h6-size: 26px;
  --h6-weight: 400;
  --h6-line-height: 160%;
  
  /* Body: 16px, weight 400, line-height 1.6, letter-spacing 0.2px */
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letter-spacing: 0.2px;
  
  --small-size: 14px;

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

  /* Container */
  --container-max: 1280px;
  --container-padding: 24px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* Tablet breakpoint: 991px */
@media (max-width: 991px) {
  :root {
    --h1-size: 3rem;
    --h2-size: 2.5rem;
    --h3-size: 32px;
    --h4-size: 28px;
    --h5-size: 26px;
    --h6-size: 22px;
    --container-padding: 20px;
  }
}

/* Mobile breakpoint: 768px */
@media (max-width: 768px) {
  :root {
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 28px;
    --h4-size: 24px;
    --h5-size: 22px;
    --h6-size: 18px;
    --container-padding: 16px;
  }
}