/**
 * Receipts Design System
 * Version 1.0 | January 2026
 *
 * A warm, supportive design system for relationship communication analysis.
 * Built with care for people who deserve clarity.
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------------
     COLOR TOKENS - Primary
     ------------------------------------------------------------------------ */
  --color-primary: #7C9A82;
  --color-primary-light: #8FAF95;
  --color-primary-dark: #5D7A63;
  --color-primary-darker: #4A6650;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Brand (from logo)
     ------------------------------------------------------------------------ */
  --color-brand-gold: #D4B896;
  --color-brand-gold-light: #E4C8A6;
  --color-brand-gold-dark: #C4A882;
  --color-brand-seal: #A67C5B;
  --color-brand-seal-dark: #8B6B4A;
  --color-brand-lavender: #E8E4EF;
  --color-brand-lavender-dark: #D5D0DC;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Accent
     ------------------------------------------------------------------------ */
  --color-accent: #A67C5B;
  --color-accent-light: #D4A08D;
  --color-accent-dark: #B07D6A;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Secondary
     ------------------------------------------------------------------------ */
  --color-secondary: #E8E4DF;
  --color-secondary-light: #F3F0ED;
  --color-secondary-dark: #6B6660;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Semantic (Healthy)
     ------------------------------------------------------------------------ */
  --color-healthy-bg: #E8F2EA;
  --color-healthy-text: #5D7A63;
  --color-healthy-dark: #4A6650;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Semantic (Caution)
     ------------------------------------------------------------------------ */
  --color-caution-bg: #FDF6E3;
  --color-caution-text: #B8860B;
  --color-caution-dark: #8B6914;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Semantic (Concern)
     ------------------------------------------------------------------------ */
  --color-concern-bg: #F5E1DC;
  --color-concern-text: #B07D6A;
  --color-concern-dark: #8B5E4D;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Semantic (Critical)
     ------------------------------------------------------------------------ */
  --color-critical-bg: #F8E8E5;
  --color-critical-text: #C8786E;
  --color-critical-dark: #B8685E;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Semantic (Info)
     ------------------------------------------------------------------------ */
  --color-info-bg: #E8E4EF;
  --color-info-text: #6B6680;
  --color-info-dark: #4A4660;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Status
     ------------------------------------------------------------------------ */
  --color-status-excellent: #5D7A63;
  --color-status-good: #7C9A82;
  --color-status-warning: #B8860B;
  --color-status-error: #C4856A;
  --color-status-offline: #78716C;
  --color-status-syncing: #7C9A82;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Backgrounds (Light Mode)
     ------------------------------------------------------------------------ */
  --color-bg: #FAF8F5;
  --color-bg-secondary: #FFFEFB;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFEFB;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Text (Light Mode)
     ------------------------------------------------------------------------ */
  --color-text-primary: #2D2926;
  --color-text-secondary: #5C5652;
  --color-text-tertiary: #8A837D;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Borders
     ------------------------------------------------------------------------ */
  --color-border: #E8E4DF;
  --color-divider: #F3F0ED;

  /* ------------------------------------------------------------------------
     COLOR TOKENS - Icons
     ------------------------------------------------------------------------ */
  --color-icon: #5C5652;
  --color-icon-active: #7C9A82;
  --color-icon-muted: #9C9690;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS - Font Families
     ------------------------------------------------------------------------ */
  --font-logo: 'Fraunces', Georgia, serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS - Font Sizes
     ------------------------------------------------------------------------ */
  --font-size-hero: 48px;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-size-label: 14px;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS - Line Heights
     ------------------------------------------------------------------------ */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-heading: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS - Font Weights
     ------------------------------------------------------------------------ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY TOKENS - Letter Spacing
     ------------------------------------------------------------------------ */
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: 0;

  /* ------------------------------------------------------------------------
     SPACING TOKENS (8-point grid)
     ------------------------------------------------------------------------ */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* ------------------------------------------------------------------------
     SPACING TOKENS - Gutters
     ------------------------------------------------------------------------ */
  --gutter-compact: 16px;
  --gutter-standard: 24px;
  --gutter-wide: 32px;
  --margin-screen: 24px;
  --margin-card: 16px;

  /* ------------------------------------------------------------------------
     BORDER RADIUS TOKENS
     ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Semantic aliases */
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-modal: var(--radius-xl);
  --radius-pill: var(--radius-full);

  /* ------------------------------------------------------------------------
     SHADOW TOKENS
     ------------------------------------------------------------------------ */
  --shadow-color: 45, 41, 38;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.04);
  --shadow-md: 0 4px 8px rgba(var(--shadow-color), 0.08);
  --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.12);
  --shadow-glow: 0 0 16px rgba(124, 154, 130, 0.25);
  --shadow-glow-subtle: 0 0 8px rgba(124, 154, 130, 0.15);

  /* ------------------------------------------------------------------------
     ICON TOKENS
     ------------------------------------------------------------------------ */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;
  --icon-stroke: 2px;
  --icon-stroke-bold: 3px;

  /* ------------------------------------------------------------------------
     TOUCH TARGET TOKENS
     ------------------------------------------------------------------------ */
  --touch-target-min: 44px;
  --touch-target-recommended: 48px;

  /* ------------------------------------------------------------------------
     ANIMATION TOKENS
     ------------------------------------------------------------------------ */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* ------------------------------------------------------------------------
     GLASSMORPHISM TOKENS
     ------------------------------------------------------------------------ */
  --glass-blur-light: 10px;
  --glass-blur-medium: 20px;
  --glass-blur-heavy: 30px;
  --glass-opacity-light: 0.7;
  --glass-opacity-dark: 0.8;
  --glass-border-opacity: 0.2;
}


/* ============================================================================
   DARK MODE - data-theme attribute
   ============================================================================ */

[data-theme="dark"] {
  --color-bg: #1A1917;
  --color-bg-secondary: #252320;
  --color-surface: #2D2926;
  --color-surface-elevated: #3D3835;

  --color-text-primary: #FAF8F5;
  --color-text-secondary: #D6D0CA;
  --color-text-tertiary: #A8A29E;

  --color-border: #3D3835;
  --color-divider: #2D2926;

  --color-icon: #A8A29E;

  --color-secondary: #3D3835;
  --color-secondary-light: #4D4845;

  --color-healthy-bg: #2A3D2E;
  --color-healthy-text: #8ECAA5;

  --color-caution-bg: #3D3528;
  --color-caution-text: #D4A84B;

  --color-concern-bg: #3D2E2A;
  --color-concern-text: #D4A08D;

  --color-critical-bg: #3D2A2A;
  --color-critical-text: #E8A099;

  --color-info-bg: #2E2D35;
  --color-info-text: #A8A4B8;

  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.2);
  --shadow-md: 0 4px 8px rgba(var(--shadow-color), 0.3);
  --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.4);

  --color-card-header-text: #1A1917;
}

[data-theme="dark"] .card__header {
  color: var(--color-card-header-text);
}

[data-theme="dark"] .btn-danger {
  color: var(--color-card-header-text);
}


/* ============================================================================
   DARK MODE - prefers-color-scheme media query
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1A1917;
    --color-bg-secondary: #252320;
    --color-surface: #2D2926;
    --color-surface-elevated: #3D3835;

    --color-text-primary: #FAF8F5;
    --color-text-secondary: #D6D0CA;
    --color-text-tertiary: #A8A29E;

    --color-border: #3D3835;
    --color-divider: #2D2926;

    --color-icon: #A8A29E;

    --color-secondary: #3D3835;
    --color-secondary-light: #4D4845;

    --color-healthy-bg: #2A3D2E;
    --color-healthy-text: #8ECAA5;

    --color-caution-bg: #3D3528;
    --color-caution-text: #D4A84B;

    --color-concern-bg: #3D2E2A;
    --color-concern-text: #D4A08D;

    --color-critical-bg: #3D2A2A;
    --color-critical-text: #E8A099;

    --color-info-bg: #2E2D35;
    --color-info-text: #A8A4B8;

    --shadow-color: 0, 0, 0;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.2);
    --shadow-md: 0 4px 8px rgba(var(--shadow-color), 0.3);
    --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.4);

    --color-card-header-text: #1A1917;
  }

  :root:not([data-theme="light"]) .card__header {
    color: var(--color-card-header-text);
  }

  :root:not([data-theme="light"]) .btn-danger {
    color: var(--color-card-header-text);
  }
}


/* ============================================================================
   BASE / RESET STYLES
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  transition: background-color var(--duration-normal) var(--easing-default),
              color var(--duration-normal) var(--easing-default);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


/* ============================================================================
   TYPOGRAPHY CLASSES
   ============================================================================ */

.type-hero {
  font-family: var(--font-heading);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.type-h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.type-h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.type-h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.type-h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
}

.type-body-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.type-body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.type-caption {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  color: var(--color-text-tertiary);
}

.type-label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}

.logo-wordmark {
  font-family: var(--font-logo);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  font-size: 48px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.logo-wordmark--sm {
  font-size: 24px;
}


/* ============================================================================
   BUTTON COMPONENTS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-height: var(--touch-target-min);
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.btn--sm {
  min-height: 36px;
  padding: 8px 16px;
  font-size: var(--font-size-body-sm);
}

.btn--lg {
  min-height: 52px;
  padding: 16px 32px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;

  &:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
  }

  &:active:not(:disabled) {
    background-color: var(--color-primary-darker);
  }
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);

  &:hover:not(:disabled) {
    background-color: var(--color-healthy-bg);
  }

  &:active:not(:disabled) {
    background-color: #D6E8DC;
  }
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);

  &:hover:not(:disabled) {
    background-color: var(--color-secondary-light);
  }

  &:active:not(:disabled) {
    background-color: var(--color-secondary);
  }
}

.btn-danger {
  background-color: var(--color-critical-text);
  color: #FFFFFF;

  &:hover:not(:disabled) {
    background-color: #C4746A;
  }

  &:active:not(:disabled) {
    background-color: var(--color-critical-dark);
  }
}


/* ============================================================================
   CARD COMPONENTS
   ============================================================================ */

.card {
  background-color: transparent;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card__header {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: calc(var(--radius-card) + 8px);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  display: flex;
  align-items: center;
}

.card__body {
  background-color: var(--color-surface);
  padding: var(--spacing-sm);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.card__text {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
}

.card:not(:has(.card__header)) .card__body {
  border-radius: var(--radius-card);
}

.card--secondary .card__header {
  background-color: var(--color-secondary-dark);
}

.card--healthy .card__header {
  background-color: var(--color-healthy-text);
}

.card--caution .card__header {
  background-color: var(--color-caution-text);
}

.card--concern .card__header {
  background-color: var(--color-concern-text);
}

.card--critical .card__header {
  background-color: var(--color-critical-text);
}


/* ============================================================================
   FORM INPUT COMPONENTS
   ============================================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.input {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  min-height: var(--touch-target-min);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);

  &::placeholder {
    color: var(--color-text-tertiary);
  }

  &:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(124, 154, 130, 0.15);
    outline: none;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.input--error {
  border-color: var(--color-critical-text);
  background-color: var(--color-critical-bg);

  &:focus {
    box-shadow: 0 0 0 3px rgba(212, 132, 122, 0.15);
  }
}

textarea.input {
  resize: vertical;
  min-height: 100px;
}


/* ============================================================================
   BADGE COMPONENTS
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
}

.badge--sm {
  padding: 4px 8px;
  font-size: 10px;
}

.badge--lg {
  padding: 8px 16px;
  font-size: var(--font-size-body-sm);
}

.badge--default {
  background-color: var(--color-secondary);
  color: var(--color-text-primary);
}

.badge--healthy {
  background-color: var(--color-healthy-bg);
  color: var(--color-healthy-text);
}

.badge--caution {
  background-color: var(--color-caution-bg);
  color: var(--color-caution-text);
}

.badge--concern {
  background-color: var(--color-concern-bg);
  color: var(--color-concern-text);
}

.badge--critical {
  background-color: var(--color-critical-bg);
  color: var(--color-critical-text);
}

.badge--info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}


/* ============================================================================
   UTILITY CLASSES - Spacing (Margin)
   ============================================================================ */

.m-0 { margin: 0; }
.m-xxs { margin: var(--spacing-xxs); }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-xxl { margin: var(--spacing-xxl); }
.m-xxxl { margin: var(--spacing-xxxl); }

.mt-0 { margin-top: 0; }
.mt-xxs { margin-top: var(--spacing-xxs); }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-xxl { margin-top: var(--spacing-xxl); }
.mt-xxxl { margin-top: var(--spacing-xxxl); }

.mr-0 { margin-right: 0; }
.mr-xxs { margin-right: var(--spacing-xxs); }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xxs { margin-bottom: var(--spacing-xxs); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-xxl { margin-bottom: var(--spacing-xxl); }
.mb-xxxl { margin-bottom: var(--spacing-xxxl); }

.ml-0 { margin-left: 0; }
.ml-xxs { margin-left: var(--spacing-xxs); }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }


/* ============================================================================
   UTILITY CLASSES - Spacing (Padding)
   ============================================================================ */

.p-0 { padding: 0; }
.p-xxs { padding: var(--spacing-xxs); }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }
.p-xxxl { padding: var(--spacing-xxxl); }

.pt-0 { padding-top: 0; }
.pt-xxs { padding-top: var(--spacing-xxs); }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pr-0 { padding-right: 0; }
.pr-xxs { padding-right: var(--spacing-xxs); }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

.pb-0 { padding-bottom: 0; }
.pb-xxs { padding-bottom: var(--spacing-xxs); }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.pl-0 { padding-left: 0; }
.pl-xxs { padding-left: var(--spacing-xxs); }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }


/* ============================================================================
   UTILITY CLASSES - Text
   ============================================================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-healthy { color: var(--color-healthy-text); }
.text-caution { color: var(--color-caution-text); }
.text-concern { color: var(--color-concern-text); }
.text-critical { color: var(--color-critical-text); }
.text-info { color: var(--color-info-text); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   UTILITY CLASSES - Display
   ============================================================================ */

.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }


/* ============================================================================
   UTILITY CLASSES - Flexbox
   ============================================================================ */

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.gap-xxs { gap: var(--spacing-xxs); }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }


/* ============================================================================
   UTILITY CLASSES - Grid
   ============================================================================ */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* ============================================================================
   UTILITY CLASSES - Width & Height
   ============================================================================ */

.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-full { max-width: 100%; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }


/* ============================================================================
   UTILITY CLASSES - Background
   ============================================================================ */

.bg-primary { background-color: var(--color-bg); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-elevated { background-color: var(--color-surface-elevated); }
.bg-healthy { background-color: var(--color-healthy-bg); }
.bg-caution { background-color: var(--color-caution-bg); }
.bg-concern { background-color: var(--color-concern-bg); }
.bg-critical { background-color: var(--color-critical-bg); }
.bg-info { background-color: var(--color-info-bg); }


/* ============================================================================
   UTILITY CLASSES - Borders
   ============================================================================ */

.border { border: 1px solid var(--color-border); }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-none { border: none; }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }


/* ============================================================================
   UTILITY CLASSES - Shadows
   ============================================================================ */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }


/* ============================================================================
   UTILITY CLASSES - Positioning
   ============================================================================ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }


/* ============================================================================
   UTILITY CLASSES - Overflow
   ============================================================================ */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }


/* ============================================================================
   UTILITY CLASSES - Cursor & Interaction
   ============================================================================ */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; }


/* ============================================================================
   UTILITY CLASSES - Opacity
   ============================================================================ */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }


/* ============================================================================
   ACCESSIBILITY - Focus States
   ============================================================================ */

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(124, 154, 130, 0.15);
}


/* ============================================================================
   ACCESSIBILITY - Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   ACCESSIBILITY - Screen Reader Utilities
   ============================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ============================================================================
   RESPONSIVE BREAKPOINTS - Tablet (768px+)
   ============================================================================ */

@media (min-width: 768px) {
  .type-hero {
    font-size: var(--font-size-hero);
  }

  .type-h1 {
    font-size: var(--font-size-h1);
  }

  .type-h2 {
    font-size: var(--font-size-h2);
  }

  .type-h3 {
    font-size: var(--font-size-h3);
  }

  .type-h4 {
    font-size: var(--font-size-h4);
  }

  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:inline { display: inline; }
  .md\:inline-flex { display: inline-flex; }

  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }

  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .md\:gap-sm { gap: var(--spacing-sm); }
  .md\:gap-md { gap: var(--spacing-md); }
  .md\:gap-lg { gap: var(--spacing-lg); }

  .md\:p-md { padding: var(--spacing-md); }
  .md\:p-lg { padding: var(--spacing-lg); }
  .md\:px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
  .md\:px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}


/* ============================================================================
   RESPONSIVE BREAKPOINTS - Desktop (1024px+)
   ============================================================================ */

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:inline { display: inline; }
  .lg\:inline-flex { display: inline-flex; }

  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }

  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: flex-end; }

  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:justify-between { justify-content: space-between; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .lg\:gap-sm { gap: var(--spacing-sm); }
  .lg\:gap-md { gap: var(--spacing-md); }
  .lg\:gap-lg { gap: var(--spacing-lg); }
  .lg\:gap-xl { gap: var(--spacing-xl); }

  .lg\:p-lg { padding: var(--spacing-lg); }
  .lg\:p-xl { padding: var(--spacing-xl); }
  .lg\:px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
  .lg\:px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }

  .lg\:max-w-4xl { max-width: 56rem; }
  .lg\:max-w-5xl { max-width: 64rem; }
  .lg\:max-w-6xl { max-width: 72rem; }
}


/* ============================================================================
   RESPONSIVE TYPOGRAPHY - Mobile-first adjustments
   ============================================================================ */

@media (max-width: 767px) {
  .type-hero {
    font-size: 36px;
  }

  .type-h1 {
    font-size: 28px;
  }

  .type-h2 {
    font-size: 22px;
  }

  .type-h3 {
    font-size: 18px;
  }

  .type-h4 {
    font-size: 16px;
  }

  .logo-wordmark {
    font-size: 36px;
  }
}


/* ============================================================================
   CONTAINER UTILITY
   ============================================================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-compact);
  padding-right: var(--gutter-compact);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--gutter-standard);
    padding-right: var(--gutter-standard);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--gutter-wide);
    padding-right: var(--gutter-wide);
  }
}