/* Generated by build.py from config/brand-tokens.json */
:root {
  --color-deep: #1a3a52;
  --color-amber: #e8a84c;
  --color-sand: #f5f0e8;
  --color-forest: #3a6a5a;
  --color-deep-light: #2a5272;
  --color-white: #ffffff;
  --color-primary: #1a3a52;
  --color-background: #ffffff;
  --color-surface: #f5f0e8;
  --color-text: #1a3a52;
  --color-text-muted: rgba(26,58,82,0.6);
  --color-text-primary: #1a3a52;
  --color-text-secondary: rgba(26,58,82,0.6);
  --color-text-inverse: #f5f0e8;
  --color-border: rgba(26,58,82,0.1);
  --font-display: "Geist", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-google-fonts-url: https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Geist:wght@400;500;600;700;800&display=swap;
  --type-scale-xs: 11px;
  --type-scale-sm: 13px;
  --type-scale-base: 15px;
  --type-scale-md: 18px;
  --type-scale-lg: 24px;
  --type-scale-xl: 32px;
  --type-scale-xxl: 48px;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-xxl: 80px;
  --spacing-section: 80px;
  --spacing-container-max: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius-button: 6px;
  --radius-card: 12px;
  --shadow-sm: 0 1px 3px rgba(26,58,82,0.08);
  --shadow-md: 0 4px 16px rgba(26,58,82,0.12);
  --shadow-lg: 0 8px 32px rgba(26,58,82,0.16);
  --shadow-card: 0 4px 16px rgba(26,58,82,0.12);
  --alpha-deep-02: rgba(26,58,82,0.02);
  --alpha-deep-03: rgba(26,58,82,0.03);
  --alpha-deep-04: rgba(26,58,82,0.04);
  --alpha-deep-05: rgba(26,58,82,0.05);
  --alpha-deep-06: rgba(26,58,82,0.06);
  --alpha-deep-08: rgba(26,58,82,0.08);
  --alpha-deep-10: rgba(26,58,82,0.1);
  --alpha-deep-12: rgba(26,58,82,0.12);
  --alpha-deep-16: rgba(26,58,82,0.16);
  --alpha-deep-40: rgba(26,58,82,0.4);
  --alpha-deep-45: rgba(26,58,82,0.45);
  --alpha-deep-50: rgba(26,58,82,0.5);
  --alpha-deep-55: rgba(26,58,82,0.55);
  --alpha-deep-60: rgba(26,58,82,0.6);
  --alpha-deep-65: rgba(26,58,82,0.65);
  --alpha-deep-75: rgba(26,58,82,0.75);
  --alpha-sand-05: rgba(245,240,232,0.05);
  --alpha-sand-06: rgba(245,240,232,0.06);
  --alpha-sand-07: rgba(245,240,232,0.07);
  --alpha-sand-08: rgba(245,240,232,0.08);
  --alpha-sand-10: rgba(245,240,232,0.1);
  --alpha-sand-20: rgba(245,240,232,0.2);
  --alpha-sand-30: rgba(245,240,232,0.3);
  --alpha-sand-35: rgba(245,240,232,0.35);
  --alpha-sand-40: rgba(245,240,232,0.4);
  --alpha-sand-45: rgba(245,240,232,0.45);
  --alpha-sand-50: rgba(245,240,232,0.5);
  --alpha-amber-90: rgba(232,168,76,0.9);
  --size-0: 0px;
  --size-1: 1px;
  --size-2: 2px;
  --size-3: 3px;
  --size-4: 4px;
  --size-5: 5px;
  --size-6: 6px;
  --size-7: 7px;
  --size-8: 8px;
  --size-9: 9px;
  --size-10: 10px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-24: 24px;
  --size-26: 26px;
  --size-28: 28px;
  --size-32: 32px;
  --size-34: 34px;
  --size-36: 36px;
  --size-44: 44px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --size-80: 80px;
  --size-hairline: 0.5px;
  --size-thin: 2.5px;
  --layout-canvas-width: 1080px;
  --layout-canvas-height: 1350px;
  --layout-portfolio-card-max-width: 820px;
  --layout-portfolio-image-col: 280px;
  --layout-portfolio-card-min-height: 290px;
  --layout-portfolio-card-mobile-image-height: 200px;
  --layout-portfolio-mobile-breakpoint: 680px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --social-instagram-post-width: 1080px;
  --social-instagram-post-height: 1350px;
  --brand-wordmark-text: Susplify;
  --brand-motto: Making Energy Simple;
}