/**
 * Outside Ministries Design System Tokens
 * Reference: Sacred Streetwear / DESIGN.md
 */

:root {
  /* ==========================================================================
     Color Tokens
     ========================================================================== */
  /* Brand Core */
  --om-color-primary: #C5A059;
  --om-color-primary-light: #E9C176;
  --om-color-primary-hover: #D4AF37;
  --om-color-secondary: #F5F2EB;
  --om-color-tertiary: #8C733E;

  /* Canvas Substrate & Pitch */
  --om-color-bg: #131313;
  --om-color-bg-carbon: #111111;
  --om-color-bg-pitch: #0A0A0A;

  /* Surface Tiers */
  --om-surface-container-lowest: #0E0E0E;
  --om-surface-dim: #131313;
  --om-surface: #131313;
  --om-surface-container-low: #1C1B1B;
  --om-surface-container: #201F1F;
  --om-surface-container-high: #2A2A2A;
  --om-surface-container-highest: #353534;
  --om-surface-bright: #3A3939;

  /* Text & Foreground Hierarchy */
  --om-on-surface: #E5E2E1;
  --om-on-surface-variant: #D1C5B4;
  --om-text-muted: #8E8A82;
  --om-on-primary: #412D00;
  --om-on-secondary: #31312C;
  --om-inverse-surface: #E5E2E1;
  --om-inverse-on-surface: #313030;

  /* Borders & Hairlines */
  --om-border-subdued: rgba(197, 160, 89, 0.20);
  --om-border-subdued-hover: rgba(197, 160, 89, 0.50);
  --om-border-active: #C5A059;
  --om-border-neutral: #353534;
  --om-border-neutral-light: #4E4639;

  /* Feedback & Alerts */
  --om-color-error: #FFB4AB;
  --om-color-error-container: #93000A;
  --om-color-on-error: #690005;

  /* ==========================================================================
     Typography Tokens
     ========================================================================== */
  --om-font-serif: 'Playfair Display', Georgia, serif;
  --om-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Display & Headline Type Scale */
  --om-type-display-hero-size: 4rem;
  --om-type-display-hero-lh: 1.05;
  --om-type-display-hero-weight: 600;
  --om-type-display-hero-tracking: -0.02em;

  --om-type-display-hero-mobile-size: 2.5rem;
  --om-type-display-hero-mobile-lh: 1.10;
  --om-type-display-hero-mobile-weight: 600;
  --om-type-display-hero-mobile-tracking: -0.01em;

  --om-type-headline-lg-size: 2.75rem;
  --om-type-headline-lg-lh: 1.15;
  --om-type-headline-lg-weight: 500;
  --om-type-headline-lg-tracking: -0.01em;

  --om-type-headline-lg-mobile-size: 2rem;
  --om-type-headline-lg-mobile-lh: 1.20;
  --om-type-headline-lg-mobile-weight: 500;
  --om-type-headline-lg-mobile-tracking: 0em;

  --om-type-headline-md-size: 1.75rem;
  --om-type-headline-md-lh: 1.25;
  --om-type-headline-md-weight: 400;
  --om-type-headline-md-tracking: 0em;

  --om-type-headline-sm-size: 1.25rem;
  --om-type-headline-sm-lh: 1.30;
  --om-type-headline-sm-weight: 400;
  --om-type-headline-sm-tracking: 0.01em;

  /* Body & Label Type Scale */
  --om-type-body-lg-size: 1.125rem;
  --om-type-body-lg-lh: 1.60;
  --om-type-body-lg-weight: 300;
  --om-type-body-lg-tracking: 0.01em;

  --om-type-body-md-size: 0.9375rem;
  --om-type-body-md-lh: 1.55;
  --om-type-body-md-weight: 400;
  --om-type-body-md-tracking: 0.01em;

  --om-type-body-sm-size: 0.8125rem;
  --om-type-body-sm-lh: 1.50;
  --om-type-body-sm-weight: 400;
  --om-type-body-sm-tracking: 0.02em;

  --om-type-label-caps-size: 0.6875rem;
  --om-type-label-caps-lh: 1.20;
  --om-type-label-caps-weight: 600;
  --om-type-label-caps-tracking: 0.22em;

  --om-type-label-md-size: 0.875rem;
  --om-type-label-md-lh: 1.30;
  --om-type-label-md-weight: 500;
  --om-type-label-md-tracking: 0.04em;

  --om-type-price-tag-size: 0.9375rem;
  --om-type-price-tag-lh: 1.20;
  --om-type-price-tag-weight: 600;
  --om-type-price-tag-tracking: 0.05em;

  /* ==========================================================================
     Spacing Tokens
     ========================================================================== */
  --om-space-xs: 0.25rem;     /* 4px */
  --om-space-sm: 0.50rem;     /* 8px */
  --om-space-md: 1.00rem;     /* 16px */
  --om-space-lg: 1.75rem;     /* 28px */
  --om-space-xl: 3.00rem;     /* 48px */
  --om-space-2xl: 5.00rem;    /* 80px */

  /* Grid & Viewport Boundaries */
  --om-container-max: 1440px;
  --om-margin-desktop: 3rem;
  --om-margin-tablet: 2rem;
  --om-margin-mobile: 1.25rem;
  --om-gutter-desktop: 1.5rem;
  --om-gutter-tablet: 1rem;
  --om-gutter-mobile: 0.75rem;

  /* ==========================================================================
     Shape & Elevation Tokens (Architectural Sharp)
     ========================================================================== */
  --om-radius-none: 0px;
  --om-radius-pill: 9999px;

  --om-shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.8);
  --om-shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.6);
  --om-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.5);

  --om-backdrop-blur: blur(16px);
  --om-backdrop-bg: rgba(14, 14, 14, 0.85);

  /* Transitions */
  --om-transition-fast: 150ms ease-out;
  --om-transition-normal: 250ms ease-out;
  --om-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}