/* ============================================================
   SACRED WARMTH - Design Token System
   Pfarreiengemeinschaft Weilheim i.OB
   3-Layer Architecture: Primitive -> Semantic -> Component
   ============================================================ */

/* ============================================================
   LAYER 1: PRIMITIVE TOKENS (raw values)
   Never use these directly in components!
   ============================================================ */
:root {
  /* --- Colors: Brand --- */
  --p-brown-900: #3a2518;
  --p-brown-800: #4a3120;
  --p-brown-700: #5a3e2b;
  --p-brown-600: #6d4e38;
  --p-brown-500: #8b7355;
  --p-brown-400: #a89279;
  --p-brown-300: #c4b49e;
  --p-brown-200: #ddd0c0;
  --p-brown-100: #ede6db;
  --p-brown-50:  #f7f3ee;

  --p-orange-900: #7a3c0a;
  --p-orange-800: #9c5212;
  --p-orange-700: #c96a1e;
  --p-orange-600: #e77b23;
  --p-orange-500: #f09543;
  --p-orange-400: #f5a623;
  --p-orange-300: #f8c06a;
  --p-orange-200: #fbd98f;
  --p-orange-100: #fef0cc;
  --p-orange-50:  #fff8eb;

  --p-gold-900: #6b5200;
  --p-gold-800: #8a6b00;
  --p-gold-700: #a88200;
  --p-gold-600: #c9980f;
  --p-gold-500: #d4a832;
  --p-gold-400: #e2b83a;
  --p-gold-300: #ecc95e;
  --p-gold-200: #f3db8a;
  --p-gold-100: #faefc4;
  --p-gold-50:  #fdf8e8;

  --p-cream-900: #c4b9a8;
  --p-cream-800: #d4cab8;
  --p-cream-700: #e0d8ca;
  --p-cream-600: #ebe4d7;
  --p-cream-500: #f0ebe2;
  --p-cream-400: #f5f1ea;
  --p-cream-300: #f7f3ee;
  --p-cream-200: #faf8f5;
  --p-cream-100: #fcfbf9;
  --p-cream-50:  #fefefe;

  --p-ink-900: #0f0d0b;
  --p-ink-800: #1a1714;
  --p-ink-700: #2a2520;
  --p-ink-600: #3d3630;
  --p-ink-500: #524a42;
  --p-ink-400: #6b6259;
  --p-ink-300: #8a8279;
  --p-ink-200: #a9a299;
  --p-ink-100: #ccc8c2;
  --p-ink-50:  #e5e2de;

  /* --- Colors: Feedback --- */
  --p-green-700: #15803d;
  --p-green-600: #16a34a;
  --p-green-500: #22c55e;
  --p-green-100: #dcfce7;
  --p-green-50:  #f0fdf4;

  --p-red-700: #b91c1c;
  --p-red-600: #dc2626;
  --p-red-500: #ef4444;
  --p-red-100: #fee2e2;
  --p-red-50:  #fef2f2;

  --p-blue-700: #1d4ed8;
  --p-blue-600: #2563eb;
  --p-blue-100: #dbeafe;
  --p-blue-50:  #eff6ff;

  /* --- Typography --- */
  --p-font-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --p-font-sans: 'Outfit', 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;

  --p-text-xs:   0.75rem;   /* 12px */
  --p-text-sm:   0.8125rem; /* 13px */
  --p-text-base: 0.9375rem; /* 15px */
  --p-text-md:   1rem;      /* 16px */
  --p-text-lg:   1.125rem;  /* 18px */
  --p-text-xl:   1.25rem;   /* 20px */
  --p-text-2xl:  1.5rem;    /* 24px */
  --p-text-3xl:  1.875rem;  /* 30px */
  --p-text-4xl:  2.25rem;   /* 36px */

  --p-leading-tight: 1.2;
  --p-leading-snug:  1.35;
  --p-leading-normal: 1.5;
  --p-leading-relaxed: 1.65;

  --p-weight-light:    300;
  --p-weight-normal:   400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;

  /* --- Spacing (4px base) --- */
  --p-space-0:  0;
  --p-space-1:  0.25rem;  /* 4px */
  --p-space-2:  0.5rem;   /* 8px */
  --p-space-3:  0.75rem;  /* 12px */
  --p-space-4:  1rem;     /* 16px */
  --p-space-5:  1.25rem;  /* 20px */
  --p-space-6:  1.5rem;   /* 24px */
  --p-space-8:  2rem;     /* 32px */
  --p-space-10: 2.5rem;   /* 40px */
  --p-space-12: 3rem;     /* 48px */
  --p-space-16: 4rem;     /* 64px */
  --p-space-20: 5rem;     /* 80px */

  /* --- Borders --- */
  --p-radius-sm:   6px;
  --p-radius-md:   10px;
  --p-radius-lg:   12px;
  --p-radius-xl:   16px;
  --p-radius-2xl:  20px;
  --p-radius-full: 9999px;

  --p-border-thin:   1px;
  --p-border-medium: 1.5px;
  --p-border-thick:  2px;

  /* --- Shadows --- */
  --p-shadow-xs:  0 1px 2px rgba(42,37,32,0.05);
  --p-shadow-sm:  0 2px 6px rgba(42,37,32,0.06);
  --p-shadow-md:  0 4px 12px rgba(42,37,32,0.08);
  --p-shadow-lg:  0 8px 24px rgba(42,37,32,0.10);
  --p-shadow-xl:  0 12px 40px rgba(42,37,32,0.12);

  /* --- Transitions --- */
  --p-duration-fast:   0.12s;
  --p-duration-normal: 0.2s;
  --p-duration-slow:   0.35s;
  --p-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --p-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Breakpoints (for reference, used in @media) --- */
  /* --p-bp-sm: 480px; --p-bp-md: 768px; --p-bp-lg: 1024px; --p-bp-xl: 1280px; */
}

/* ============================================================
   LAYER 2: SEMANTIC TOKENS (purpose aliases)
   Use these in layouts. Enable theme switching.
   ============================================================ */
:root, [data-theme="light"] {
  /* --- Surface & Background --- */
  --color-bg:            var(--p-cream-200);
  --color-bg-subtle:     var(--p-cream-300);
  --color-surface:       var(--p-cream-50);
  --color-surface-raised: #ffffff;
  --color-surface-sunken: var(--p-cream-500);
  --color-overlay:       rgba(42, 37, 32, 0.45);

  /* --- Text --- */
  --color-text:          var(--p-ink-700);
  --color-text-strong:   var(--p-ink-900);
  --color-text-muted:    var(--p-ink-400);
  --color-text-faint:    var(--p-ink-300);
  --color-text-inverse:  var(--p-cream-100);
  --color-text-brand:    var(--p-brown-700);

  /* --- Brand --- */
  --color-primary:       var(--p-orange-600);
  --color-primary-hover: var(--p-orange-700);
  --color-primary-active: var(--p-orange-800);
  --color-primary-subtle: var(--p-orange-50);
  --color-accent:        var(--p-gold-600);
  --color-accent-hover:  var(--p-gold-500);
  --color-accent-subtle: var(--p-gold-50);
  --color-brand:         var(--p-brown-700);
  --color-brand-light:   var(--p-brown-500);

  /* --- Feedback --- */
  --color-success:       var(--p-green-600);
  --color-success-bg:    var(--p-green-50);
  --color-error:         var(--p-red-600);
  --color-error-bg:      var(--p-red-50);
  --color-warning:       var(--p-orange-600);
  --color-warning-bg:    var(--p-orange-50);
  --color-info:          var(--p-blue-600);
  --color-info-bg:       var(--p-blue-50);

  /* --- Border --- */
  --color-border:        var(--p-cream-700);
  --color-border-subtle: var(--p-cream-600);
  --color-border-strong: var(--p-brown-300);
  --color-border-focus:  var(--p-orange-600);

  /* --- Typography --- */
  --font-heading:  var(--p-font-serif);
  --font-body:     var(--p-font-sans);
  --text-body:     var(--p-text-base);
  --leading-body:  var(--p-leading-normal);

  /* --- Layout --- */
  --layout-max-width: 1200px;
  --layout-gutter:    var(--p-space-4);

  /* --- Interactive --- */
  --focus-ring: 0 0 0 3px rgba(231, 123, 35, 0.3);
  --transition: var(--p-duration-normal) var(--p-ease-default);
}

/* ============================================================
   LAYER 3: COMPONENT TOKENS
   Per-component customization
   ============================================================ */
:root {
  /* --- Card --- */
  --card-bg:           var(--color-surface-raised);
  --card-border:       var(--p-border-thin) solid var(--color-border);
  --card-radius:       var(--p-radius-lg);
  --card-padding:      var(--p-space-5);
  --card-shadow:       var(--p-shadow-xs);
  --card-shadow-hover: var(--p-shadow-md);

  /* --- Button Primary --- */
  --btn-bg:            var(--color-primary);
  --btn-bg-hover:      var(--color-primary-hover);
  --btn-bg-active:     var(--color-primary-active);
  --btn-bg-disabled:   var(--p-ink-100);
  --btn-text:          #ffffff;
  --btn-text-disabled: var(--p-ink-300);
  --btn-radius:        var(--p-radius-md);
  --btn-padding:       var(--p-space-2) var(--p-space-5);
  --btn-font-size:     var(--p-text-sm);
  --btn-font-weight:   var(--p-weight-semibold);
  --btn-shadow:        var(--p-shadow-sm);
  --btn-shadow-hover:  var(--p-shadow-md);
  --btn-transition:    all var(--transition);

  /* --- Button Secondary --- */
  --btn-s-bg:          transparent;
  --btn-s-bg-hover:    var(--p-orange-50);
  --btn-s-text:        var(--color-brand);
  --btn-s-border:      var(--p-border-medium) solid var(--color-border);
  --btn-s-border-hover: var(--p-border-medium) solid var(--color-primary);

  /* --- Button Danger --- */
  --btn-d-bg:          var(--color-error);
  --btn-d-bg-hover:    var(--p-red-700);
  --btn-d-text:        #ffffff;

  /* --- Input / Form --- */
  --input-bg:          var(--color-bg);
  --input-bg-focus:    var(--color-surface-raised);
  --input-border:      var(--p-border-medium) solid var(--color-border);
  --input-border-focus: var(--p-border-medium) solid var(--color-border-focus);
  --input-radius:      var(--p-radius-md);
  --input-padding:     var(--p-space-2) var(--p-space-3);
  --input-font-size:   var(--p-text-base);
  --input-shadow-focus: var(--focus-ring);
  --input-placeholder: var(--color-text-faint);

  /* --- Label --- */
  --label-font-size:   var(--p-text-xs);
  --label-font-weight: var(--p-weight-medium);
  --label-color:       var(--color-brand);
  --label-spacing:     var(--p-space-1);

  /* --- Navigation Header --- */
  --nav-bg:            var(--p-ink-800);
  --nav-text:          var(--p-cream-300);
  --nav-text-active:   var(--p-gold-400);
  --nav-height:        56px;
  --nav-padding:       0 var(--p-space-4);

  /* --- Intern Tabs --- */
  --tab-bg:            var(--p-ink-800);
  --tab-text:          var(--p-cream-700);
  --tab-text-hover:    var(--p-cream-200);
  --tab-text-active:   var(--p-gold-400);
  --tab-underline:     var(--p-gold-400);
  --tab-height:        48px;
  --tab-font-size:     var(--p-text-xs);

  /* --- Badge --- */
  --badge-radius:      var(--p-radius-full);
  --badge-padding:     var(--p-space-1) var(--p-space-3);
  --badge-font-size:   var(--p-text-xs);
  --badge-font-weight: var(--p-weight-semibold);

  /* --- Toast --- */
  --toast-radius:      var(--p-radius-md);
  --toast-padding:     var(--p-space-2) var(--p-space-4);
  --toast-shadow:      var(--p-shadow-lg);
  --toast-success-bg:  var(--color-success);
  --toast-error-bg:    var(--color-error);

  /* --- Modal --- */
  --modal-bg:          var(--color-surface-raised);
  --modal-radius:      var(--p-radius-xl);
  --modal-padding:     var(--p-space-6);
  --modal-shadow:      var(--p-shadow-xl);
  --modal-max-width:   700px;

  /* --- Heading --- */
  --h1-size:           var(--p-text-3xl);
  --h1-weight:         var(--p-weight-semibold);
  --h1-color:          var(--color-brand);
  --h1-family:         var(--font-heading);
  --h2-size:           var(--p-text-xl);
  --h2-weight:         var(--p-weight-semibold);
  --h2-color:          var(--color-brand);
  --h2-family:         var(--font-heading);

  /* --- Workflow Steps --- */
  --wf-step-ok:        var(--color-success);
  --wf-step-current:   var(--color-primary);
  --wf-step-open:      var(--p-ink-100);
  --wf-step-notfall:   var(--color-error);
  --wf-step-radius:    var(--p-radius-md);

  /* --- Table / Grid --- */
  --table-header-bg:   var(--p-cream-500);
  --table-row-alt:     var(--p-cream-100);
  --table-row-hover:   var(--p-cream-300);
  --table-border:      var(--p-border-thin) solid var(--color-border-subtle);

  /* --- Footer --- */
  --footer-bg:         var(--p-ink-800);
  --footer-text:       var(--p-cream-700);
  --footer-link:       var(--p-gold-400);
  --footer-link-hover: var(--p-gold-300);
}

/* ============================================================
   BASE STYLES (using semantic tokens)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }



/* body styles removed - pages set their own */

/* --- Typography --- */
/* heading styles removed - pages set their own */






a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--p-radius-sm); }

/* --- Focus --- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Selection --- */
::selection { background: var(--p-orange-200); color: var(--p-ink-700); }

/* ============================================================
   COMPONENT CLASSES
   ============================================================ */

/* --- Card --- */
.sw-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition);
}
.sw-card:hover { box-shadow: var(--card-shadow-hover); }
.sw-card h2 { margin-bottom: var(--p-space-3); }

/* --- Button --- */
.sw-btn {
  display: inline-flex; align-items: center; gap: var(--p-space-2);
  padding: var(--btn-padding);
  border: none; border-radius: var(--btn-radius);
  font-family: var(--font-body); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
  cursor: pointer; transition: var(--btn-transition);
  text-decoration: none; line-height: 1.4;
}
.sw-btn:focus-visible { box-shadow: var(--focus-ring); }
.sw-btn:active { transform: translateY(1px); }

.sw-btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--btn-shadow); }
.sw-btn-primary:hover { background: var(--btn-bg-hover); box-shadow: var(--btn-shadow-hover); }
.sw-btn-primary:disabled { background: var(--btn-bg-disabled); color: var(--btn-text-disabled); cursor: not-allowed; box-shadow: none; }

.sw-btn-secondary { background: var(--btn-s-bg); color: var(--btn-s-text); border: var(--btn-s-border); }
.sw-btn-secondary:hover { background: var(--btn-s-bg-hover); border: var(--btn-s-border-hover); }

.sw-btn-danger { background: var(--btn-d-bg); color: var(--btn-d-text); }
.sw-btn-danger:hover { background: var(--btn-d-bg-hover); }

.sw-btn-sm { padding: var(--p-space-1) var(--p-space-3); font-size: var(--p-text-xs); }
.sw-btn-lg { padding: var(--p-space-3) var(--p-space-6); font-size: var(--p-text-md); }

/* --- Form --- */
.sw-input, .sw-select, .sw-textarea {
  width: 100%; padding: var(--input-padding);
  border: var(--input-border); border-radius: var(--input-radius);
  font-family: var(--font-body); font-size: var(--input-font-size);
  background: var(--input-bg); color: var(--color-text);
  outline: none; transition: all var(--transition);
}
.sw-input:focus, .sw-select:focus, .sw-textarea:focus {
  border: var(--input-border-focus); background: var(--input-bg-focus);
  box-shadow: var(--input-shadow-focus);
}
.sw-input::placeholder, .sw-textarea::placeholder { color: var(--input-placeholder); }
.sw-textarea { min-height: 80px; resize: vertical; }

.sw-label {
  display: block;
  font-size: var(--label-font-size); font-weight: var(--label-font-weight);
  color: var(--label-color); margin-bottom: var(--label-spacing);
}

.sw-form-group { margin-bottom: var(--p-space-3); }
.sw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-3); }
.sw-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--p-space-3); }

/* --- Badge --- */
.sw-badge {
  display: inline-block; padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size); font-weight: var(--badge-font-weight);
}
.sw-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.sw-badge-error   { background: var(--color-error-bg); color: var(--color-error); }
.sw-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.sw-badge-info    { background: var(--color-info-bg); color: var(--color-info); }
.sw-badge-muted   { background: var(--p-cream-500); color: var(--color-text-muted); }

/* --- Toast --- */
.sw-toast {
  padding: var(--toast-padding); border-radius: var(--toast-radius);
  color: #fff; font-size: var(--p-text-sm); font-weight: var(--p-weight-medium);
  box-shadow: var(--toast-shadow);
}
.sw-toast-success { background: var(--toast-success-bg); }
.sw-toast-error   { background: var(--toast-error-bg); }

/* --- Modal --- */
.sw-modal-overlay {
  position: fixed; inset: 0; background: var(--color-overlay); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: var(--p-space-4);
}
.sw-modal {
  background: var(--modal-bg); border-radius: var(--modal-radius);
  padding: var(--modal-padding); max-width: var(--modal-max-width);
  width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--modal-shadow);
}

/* --- Container --- */
.sw-container { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 var(--layout-gutter); }
.sw-container-sm { max-width: 800px; margin: 0 auto; padding: 0 var(--layout-gutter); }

/* --- Utility --- */
.sw-text-muted { color: var(--color-text-muted); }
.sw-text-brand { color: var(--color-brand); }
.sw-text-sm { font-size: var(--p-text-sm); }
.sw-text-xs { font-size: var(--p-text-xs); }
.sw-text-center { text-align: center; }
.sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.sw-flex { display: flex; } .sw-flex-wrap { flex-wrap: wrap; }
.sw-gap-1 { gap: var(--p-space-1); } .sw-gap-2 { gap: var(--p-space-2); } .sw-gap-3 { gap: var(--p-space-3); } .sw-gap-4 { gap: var(--p-space-4); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* High contrast mode */
@media (forced-colors: active) {
  .sw-btn-primary { border: 2px solid ButtonText; }
  .sw-badge { border: 1px solid; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Min touch targets (WCAG 2.5.8) */
@media (pointer: coarse) {
  .sw-btn, .sw-input, .sw-select { min-height: 44px; }
  .sw-btn-sm { min-height: 36px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --h1-size: var(--p-text-2xl);
    --h2-size: var(--p-text-lg);
    --card-padding: var(--p-space-4);
    --layout-gutter: var(--p-space-3);
  }
  .sw-form-row, .sw-form-row-3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root {
    --h1-size: var(--p-text-xl);
    --card-padding: var(--p-space-3);
    --layout-gutter: var(--p-space-2);
    --btn-padding: var(--p-space-2) var(--p-space-4);
  }
}