/* ==========================================================================
   MDS Design System - Design Tokens
   CSS Custom Properties extracted from Figma design tokens
   ========================================================================== */

:root {

  /* ========================================================================
     TYPOGRAPHY - Font Families
     ======================================================================== */
  --mds-font-sans: 'Roboto', sans-serif;
  --mds-font-serif: 'Roboto Slab', serif;
  --mds-font-mail: 'Arial', sans-serif;

  /* ========================================================================
     TYPOGRAPHY - Font Weights
     ======================================================================== */
  --mds-weight-light: 300;
  --mds-weight-regular: 400;
  --mds-weight-medium: 500;
  --mds-weight-semibold: 600;
  --mds-weight-bold: 700;
  --mds-weight-black: 900;

  /* ========================================================================
     SPACING
     ======================================================================== */
  --mds-space-0: 0px;
  --mds-space-05: 2px;
  --mds-space-1: 4px;
  --mds-space-2: 8px;
  --mds-space-3: 12px;
  --mds-space-4: 16px;
  --mds-space-6: 24px;
  --mds-space-8: 32px;
  --mds-space-10: 40px;
  --mds-space-12: 48px;
  --mds-space-16: 64px;
  --mds-space-20: 80px;
  --mds-space-30: 120px;
  --mds-space-40: 160px;

  --mds-space-neg-1: -4px;
  --mds-space-neg-2: -8px;
  --mds-space-neg-3: -12px;
  --mds-space-neg-4: -16px;
  --mds-space-neg-6: -24px;
  --mds-space-neg-10: -40px;

  /* ========================================================================
     BORDER RADIUS
     ======================================================================== */
  --mds-radius-none: 0;
  --mds-radius-xs: 2px;
  --mds-radius-sm: 4px;
  --mds-radius-md: 8px;
  --mds-radius-lg: 16px;
  --mds-radius-full: 999px;

  /* ========================================================================
     STROKE / BORDER WIDTH
     ======================================================================== */
  --mds-stroke-default: 1px;
  --mds-stroke-focus: 2px;
  --mds-stroke-radio: 4px;
  --mds-stroke-toast: 8px;

  /* ========================================================================
     ICON SIZES
     ======================================================================== */
  --mds-icon-xs: 16px;
  --mds-icon-sm: 24px;
  --mds-icon-md: 32px;
  --mds-icon-lg: 40px;

  /* ========================================================================
     BREAKPOINTS & LAYOUT
     ======================================================================== */
  --mds-breakpoint-mobile: 375px;
  --mds-breakpoint-tablet: 744px;
  --mds-breakpoint-desktop: 1440px;

  --mds-body-width-mobile: 327px;
  --mds-body-width-tablet: 664px;
  --mds-body-width-desktop: 1200px;

  --mds-device-height-mobile: 812px;
  --mds-device-height-tablet: 1133px;
  --mds-device-height-desktop: 1024px;

  /* ========================================================================
     COLORS - Background
     ======================================================================== */

  /* Background / Default */
  --mds-bg-light: #FEFEFE;
  --mds-bg-primary: #FBFBFB;
  --mds-bg-secondary: #F0F2F2;
  --mds-bg-dark: #37403F;
  --mds-bg-footer: #475957;

  /* Background / Brand */
  --mds-bg-brand-primary: #FFFAEC;
  --mds-bg-brand-secondary: #FFF5D3;
  --mds-bg-brand: #FF8500;
  --mds-bg-brand-dark: #461E04;

  /* Background / Accent - Brand */
  --mds-bg-accent-brand: #FF8500;
  --mds-bg-accent-brand-light: #FFD46D;
  --mds-bg-accent-brand-dark: #461E04;

  /* Background / Accent - Fern */
  --mds-bg-accent-fern: #73CB95;
  --mds-bg-accent-fern-light: #E6FCE6;
  --mds-bg-accent-fern-dark: #083A39;

  /* Background / Accent - Flush */
  --mds-bg-accent-flush: #E5499A;
  --mds-bg-accent-flush-light: #FDDBDF;
  --mds-bg-accent-flush-dark: #35083A;

  /* Background / Accent - Tide */
  --mds-bg-accent-tide: #7ACEF5;
  --mds-bg-accent-tide-light: #CAF7FE;
  --mds-bg-accent-tide-dark: #1A0E43;

  /* Background / Feedback */
  --mds-bg-feedback: #FEFEFE;
  --mds-bg-feedback-info: #F3F5FE;
  --mds-bg-feedback-success: #F0FDF4;
  --mds-bg-feedback-warning: #FEFCE8;
  --mds-bg-feedback-error: #FEF2F2;
  --mds-bg-feedback-highlight: #FFFAEC;

  /* Background / Action */
  --mds-bg-action: #FEFEFE;
  --mds-bg-action-hover: #F0F2F2;
  --mds-bg-action-selected: #FFFAEC;
  --mds-bg-action-disabled: #FBFBFB;
  --mds-bg-action-active: #FF8500;

  /* Background / Navigation */
  --mds-bg-nav: #FEFEFE;
  --mds-bg-nav-hover: #F0F2F2;
  --mds-bg-nav-selected: #FFFAEC;
  --mds-bg-nav-disabled: #FBFBFB;

  /* Background / Box */
  --mds-bg-box: #FEFEFE;
  --mds-bg-box-hover: #FFFAEC;
  --mds-bg-box-selected: #F0F2F2;
  --mds-bg-box-highlight: #FFFAEC;

  /* Background / Form */
  --mds-bg-form: #FEFEFE;
  --mds-bg-form-hover: #FFFAEC;
  --mds-bg-form-active: #FEFEFE;
  --mds-bg-form-selected: #FF8500;
  --mds-bg-form-disabled: #F0F2F2;
  --mds-bg-form-error: #FEF2F2;
  --mds-bg-form-success: #FEFEFE;

  /* Background / Button - Primary */
  --mds-bg-btn-primary: #37403F;
  --mds-bg-btn-primary-hover: #475957;
  --mds-bg-btn-primary-active: #37403F;
  --mds-bg-btn-primary-disabled: #D2D9D8;

  /* Background / Button - Outline */
  --mds-bg-btn-outline: #FEFEFE;
  --mds-bg-btn-outline-hover: #F0F2F2;
  --mds-bg-btn-outline-active: #D2D9D8;
  --mds-bg-btn-outline-disabled: #FEFEFE;

  /* Background / Button - Destructive */
  --mds-bg-btn-destructive: #CC2929;
  --mds-bg-btn-destructive-hover: #801616;
  --mds-bg-btn-destructive-active: #CC2929;
  --mds-bg-btn-destructive-disabled: #FEF2F2;

  /* Background / Overlay */
  --mds-bg-overlay: rgba(55, 64, 63, 0.7);

  /* ========================================================================
     COLORS - Text
     ======================================================================== */
  --mds-text-title: #475957;
  --mds-text: #37403F;
  --mds-text-eyebrow: #FF8500;
  --mds-text-on-dark: #FEFEFE;
  --mds-text-disabled: #D2D9D8;
  --mds-text-placeholder: #475957;
  --mds-text-action: #FF8500;
  --mds-text-link: #0056B3;
  --mds-text-accent: #73CB95;

  /* Text / Accent variants */
  --mds-text-accent-fern: #083A39;
  --mds-text-accent-fern-on-dark: #E6FCE6;
  --mds-text-accent-flush: #35083A;
  --mds-text-accent-flush-on-dark: #FDDBDF;
  --mds-text-accent-tide: #1A0E43;
  --mds-text-accent-tide-on-dark: #CAF7FE;
  --mds-text-accent-brand: #461E04;
  --mds-text-accent-brand-on-dark: #FFF5D3;

  /* ========================================================================
     COLORS - Icon
     ======================================================================== */
  --mds-icon: #37403F;
  --mds-icon-on-dark: #FBFBFB;
  --mds-icon-brand: #FF8500;
  --mds-icon-disabled: #D2D9D8;
  --mds-icon-unselected: rgba(55, 64, 63, 0.5);
  --mds-icon-info: #245AB2;
  --mds-icon-success: #22C55E;
  --mds-icon-warning: #F2B908;
  --mds-icon-error: #CC2929;

  /* ========================================================================
     COLORS - Border
     ======================================================================== */

  /* Border / Default */
  --mds-border-brand: #FFD46D;
  --mds-border: #D2D9D8;
  --mds-border-dark: #475957;
  --mds-border-focus: #FF8500;
  --mds-border-light: #FEFEFE;

  /* Border / Accent */
  --mds-border-accent-fern: #73CB95;
  --mds-border-accent-fern-dark: #083A39;
  --mds-border-accent-flush: #E5499A;
  --mds-border-accent-flush-dark: #35083A;
  --mds-border-accent-tide: #7ACEF5;
  --mds-border-accent-tide-dark: #1A0E43;
  --mds-border-accent-brand: #FF8500;
  --mds-border-accent-brand-dark: #461E04;

  /* Border / Feedback */
  --mds-border-feedback: #D2D9D8;
  --mds-border-feedback-info: #C8D5FA;
  --mds-border-feedback-success: #86EFAC;
  --mds-border-feedback-warning: #FDE047;
  --mds-border-feedback-error: #FCCACA;
  --mds-border-feedback-highlight: #FFD46D;

  /* Border / Action */
  --mds-border-action: #F0F2F2;
  --mds-border-action-hover: #D2D9D8;
  --mds-border-action-selected: #FFD46D;
  --mds-border-action-disabled: #F0F2F2;
  --mds-border-action-active: #FFD46D;

  /* Border / Navigation */
  --mds-border-nav: #D2D9D8;
  --mds-border-nav-hover: #D2D9D8;
  --mds-border-nav-selected: #FFD46D;
  --mds-border-nav-disabled: #F0F2F2;

  /* Border / Box */
  --mds-border-box: #F0F2F2;
  --mds-border-box-hover: #FFD46D;
  --mds-border-box-selected: #D2D9D8;
  --mds-border-box-highlight: #FFD46D;

  /* Border / Form */
  --mds-border-form: #D2D9D8;
  --mds-border-form-hover: #FFD46D;
  --mds-border-form-active: #FF8500;
  --mds-border-form-selected: #FF8500;
  --mds-border-form-disabled: #D2D9D8;
  --mds-border-form-error: #FCCACA;
  --mds-border-form-success: #86EFAC;
  --mds-border-form-filled: #37403F;

  /* Border / Button */
  --mds-border-btn: #37403F;
  --mds-border-btn-disabled: #D2D9D8;

  /* ========================================================================
     COLORS - Misc
     ======================================================================== */
  --mds-logo-brand: #FF8500;
  --mds-logo-dark: #475957;
  --mds-logo-light: #FEFEFE;
  --mds-logo-accent: #73CB95;

  --mds-shadow: rgba(55, 64, 63, 0.2);
  --mds-flow: #E23F19;

  /* ========================================================================
     TYPOGRAPHY - Heading (Desktop)
     ======================================================================== */
  --mds-heading-h1-size: 48px;
  --mds-heading-h1-line: 56px;
  --mds-heading-h2-size: 40px;
  --mds-heading-h2-line: 48px;
  --mds-heading-h3-size: 32px;
  --mds-heading-h3-line: 40px;
  --mds-heading-h4-size: 24px;
  --mds-heading-h4-line: 32px;
  --mds-heading-h5-size: 20px;
  --mds-heading-h5-line: 24px;
  --mds-heading-h6-size: 18px;
  --mds-heading-h6-line: 24px;

  /* ========================================================================
     TYPOGRAPHY - Body, Label, Info, Badge, Eyebrow
     ======================================================================== */
  --mds-body-size: 16px;
  --mds-body-line: 24px;

  --mds-label-xs-size: 12px;
  --mds-label-xs-line: 16px;
  --mds-label-sm-size: 14px;
  --mds-label-sm-line: 18px;
  --mds-label-md-size: 16px;
  --mds-label-md-line: 20px;
  --mds-label-lg-size: 18px;
  --mds-label-lg-line: 24px;

  --mds-info-sm-size: 12px;
  --mds-info-sm-line: 16px;
  --mds-info-md-size: 14px;
  --mds-info-md-line: 20px;
  --mds-info-lg-size: 16px;
  --mds-info-lg-line: 24px;

  --mds-badge-size: 12px;
  --mds-badge-line: 16px;

  --mds-eyebrow-size: 18px;
  --mds-eyebrow-line: 24px;

  /* ========================================================================
     TYPOGRAPHY - Mailing
     ======================================================================== */
  --mds-mail-h1-size: 40px;
  --mds-mail-h1-line: 48px;
  --mds-mail-h2-size: 28px;
  --mds-mail-h2-line: 32px;
  --mds-mail-h3-size: 24px;
  --mds-mail-h3-line: 28px;
  --mds-mail-body-size: 18px;
  --mds-mail-body-line: 24px;
  --mds-mail-legal-size: 12px;
  --mds-mail-legal-line: 16px;
}