/**
 * Emerson Design Tokens - CSS Custom Properties
 * Auto-generated from tokens.json
 *
 * DO NOT EDIT MANUALLY - Run 'npm run tokens:build' to regenerate
 * Last updated: 2026-01-02T12:09:53.589Z
 */

:root {
  /* ============================================
     COLORS - Core
     ============================================ */
  --color-orange: #e7602a;
  --color-charcoal: #2a2d31;
  --color-white: #ffffff;

  /* Brand Support */
  --color-brand-tobacco: #9a7b4f;
  --color-brand-slate-bronze: #7a6d5d;
  --color-brand-oxblood: #6b3a3a;

  /* Taupe Foundation */
  --color-taupe-50: #f7f5f3;
  --color-taupe-100: #ede8e3;
  --color-taupe-200: #ddd5cd;
  --color-taupe-500: #9d8b7d;
  --color-taupe-700: #6d5f52;

  /* Retro Toolkit */
  --color-retro-mustard: #d4a03c;
  --color-retro-rust: #b8593b;
  --color-retro-olive: #6b7c4c;
  --color-retro-teal: #3d6b6b;
  --color-retro-burgundy: #7a3b4c;
  --color-retro-gold: #c9a961;
  --color-retro-sage: #8b9b7a;
  --color-retro-terracotta: #c67b5c;

  /* Soft Palette */
  --color-soft-blush: #e8d5d0;
  --color-soft-sky: #d0dde8;
  --color-soft-mint: #d0e8d5;
  --color-soft-lavender: #ddd0e8;
  --color-soft-peach: #e8ddd0;
  --color-soft-seafoam: #d0e8e5;
  --color-soft-rose: #e8d0dd;
  --color-soft-cream: #e8e5d0;

  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  /* Text */
  --text-primary: #2a2d31;
  --text-secondary: #6d5f52;
  --text-muted: #9d8b7d;
  --text-inverse: #ffffff;
  --text-signature: #e7602a;

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f5f3;
  --bg-tertiary: #ede8e3;
  --bg-inverse: #2a2d31;

  /* Borders */
  --border-default: #ddd5cd;
  --border-emphasis: #9d8b7d;
  --border-strong: #2a2d31;

  /* Accent */
  --accent-signature: #e7602a;
  --accent-warm: #9a7b4f;
  --accent-cool: #7a6d5d;
  --accent-bold: #6b3a3a;

  /* Status */
  --status-success-bg: #d0e8d5;
  --status-success-text: #3d5c3d;
  --status-warning-bg: #e8ddd0;
  --status-warning-text: #8b6914;
  --status-error-bg: #e8d5d0;
  --status-error-text: #6b3a3a;
  --status-info-bg: #d0dde8;
  --status-info-text: #3d5c6b;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-heading: 'Work Sans', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Font Sizes (Desktop) */
  --font-size-hero: 72px;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 22px;
  --font-size-h5: 18px;
  --font-size-h6: 16px;
  --font-size-body-large: 20px;
  --font-size-body: 17px;
  --font-size-body-small: 15px;
  --font-size-caption: 14px;
  --font-size-label: 12px;

  /* Line Heights (Desktop) */
  --line-height-hero: 79px;
  --line-height-h1: 60px;
  --line-height-h2: 45px;
  --line-height-h3: 35px;
  --line-height-h4: 33px;
  --line-height-h5: 27px;
  --line-height-h6: 24px;
  --line-height-body-large: 34px;
  --line-height-body: 29px;
  --line-height-body-small: 23px;
  --line-height-caption: 21px;
  --line-height-label: 18px;

  /* ============================================
     SPACING
     ============================================ */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     BORDER WIDTH
     ============================================ */
  --border-width-none: 0px;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0px 1px 2px 0px rgba(42,45,49,0.05);
  --shadow-md: 0px 2px 8px 0px rgba(42,45,49,0.06);
  --shadow-lg: 0px 4px 16px 0px rgba(42,45,49,0.08);
  --shadow-xl: 0px 8px 24px 0px rgba(42,45,49,0.12);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============================================
     LAYOUT
     ============================================ */
  /* Container Max-Widths */
  --container-prose: 672px;
  --container-content: 896px;
  --container-wide: 1152px;
  --container-full: 1280px;

  /* Container Padding */
  --container-padding: 32px;

  /* Section Spacing */
  --section-spacing-sm: 48px;
  --section-spacing-md: 64px;
  --section-spacing-lg: 96px;
  --section-spacing-xl: 128px;

  /* Hero */
  --hero-min-height: 60vh;
  --hero-padding-top: 120px;
  --hero-padding-bottom: 80px;

  /* ============================================
     COMPONENT: TABLE
     ============================================ */
  /* Table Header */
  --table-header-bg: #2a2d31;
  --table-header-text: #ffffff;
  --table-header-font: Work Sans;
  --table-header-weight: 500;
  --table-header-size: 13px;

  /* Table Cell */
  --table-cell-bg: #ffffff;
  --table-cell-bg-alt: #f7f5f3;
  --table-cell-bg-hover: #ede8e3;
  --table-cell-text: #2a2d31;
  --table-cell-text-muted: #6d5f52;
  --table-cell-size: 15px;

  /* Table Border */
  --table-border-color: #ddd5cd;
  --table-border-width: 1px;
  --table-border-radius: 8px;

  /* Table Sort */
  --table-sort-icon: #9d8b7d;
  --table-sort-icon-active: #e7602a;

  /* ============================================
     COMPONENT: CARD
     ============================================ */
  --card-bg: #ffffff;
  --card-bg-hover: #f7f5f3;
  --card-border-color: #ddd5cd;
  --card-border-width: 1px;
  --card-border-radius: 8px;
  --card-padding: 20px;
  --card-padding-compact: 16px;
  --card-padding-spacious: 24px;
  --card-shadow: 0px 2px 8px 0px rgba(42,45,49,0.06);
  --card-shadow-hover: 0px 4px 16px 0px rgba(42,45,49,0.08);

  /* Card Title */
  --card-title-size: 22px;
  --card-title-weight: 300;
  --card-title-color: #2a2d31;
  --card-title-color-hover: #e7602a;

  /* Card Description */
  --card-desc-size: 15px;
  --card-desc-color: #6d5f52;

  /* Card Meta */
  --card-meta-size: 13px;
  --card-meta-color: #9d8b7d;

  /* Card Tag */
  --card-tag-bg: #ede8e3;
  --card-tag-bg-hover: #ddd5cd;
  --card-tag-text: #6d5f52;
  --card-tag-size: 11px;
  --card-tag-radius: 4px;

  /* Card Image */
  --card-image-ratio: 16/9;
  --card-image-radius: 6px;

  /* ============================================
     COMPONENT: GRID
     ============================================ */
  /* Portfolio Grid */
  --grid-portfolio-gap: 24px;
  --grid-portfolio-row-gap: 32px;
  --grid-portfolio-cols-mobile: 1;
  --grid-portfolio-cols-tablet: 2;
  --grid-portfolio-cols-desktop: 3;

  /* Gallery Grid */
  --grid-gallery-gap: 16px;
  --grid-gallery-cols-mobile: 2;
  --grid-gallery-cols-tablet: 3;
  --grid-gallery-cols-desktop: 4;

  /* Masonry Grid */
  --grid-masonry-gap: 20px;
  --grid-masonry-cols-mobile: 1;
  --grid-masonry-cols-tablet: 2;
  --grid-masonry-cols-desktop: 3;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY (Tablet)
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --font-size-hero: 56px;
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 17px;
    --font-size-h6: 15px;
    --font-size-body-large: 18px;
    --font-size-body: 16px;
    --font-size-body-small: 14px;
    --font-size-caption: 13px;
    --font-size-label: 11px;

    --line-height-hero: 62px;
    --line-height-h1: 50px;
    --line-height-h2: 40px;
    --line-height-h3: 30px;
    --line-height-h4: 30px;
    --line-height-h5: 26px;
    --line-height-h6: 23px;
    --line-height-body-large: 31px;
    --line-height-body: 27px;
    --line-height-body-small: 21px;
    --line-height-caption: 20px;
    --line-height-label: 16px;

    --container-padding: 24px;
  }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY (Mobile)
   ============================================ */
@media (max-width: 640px) {
  :root {
    --font-size-hero: 40px;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
    --font-size-h3: 22px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 15px;
    --font-size-body-large: 17px;
    --font-size-body: 16px;
    --font-size-body-small: 14px;
    --font-size-caption: 13px;
    --font-size-label: 11px;

    --line-height-hero: 44px;
    --line-height-h1: 40px;
    --line-height-h2: 33px;
    --line-height-h3: 28px;
    --line-height-h4: 27px;
    --line-height-h5: 24px;
    --line-height-h6: 23px;
    --line-height-body-large: 29px;
    --line-height-body: 27px;
    --line-height-body-small: 21px;
    --line-height-caption: 20px;
    --line-height-label: 16px;

    --container-padding: 16px;
  }
}