/**
 * e-Osiedle Design System — CSS Tokens
 * 
 * Comprehensive token library covering colors, typography, spacing, shadows, and radius.
 * Designed for Rails 8 + Hotwire + Tailwind CSS integration.
 * 
 * Usage in HTML:
 *   <div class="bg-[var(--color-brand)] text-[var(--color-text)]">
 * 
 * Or map to Tailwind via tailwind.preset.js for:
 *   <div class="bg-brand text-text">
 */

:root {
  /* ====== BRAND & ACCENT COLORS ====== */
  /* Primary brand identity */
  --color-brand: #0D9488;
  --color-brand-strong: #0F766E;
  --color-brand-soft: #5DCAA5;
  --color-brand-tint: #E1F5EE;

  /* Warm accent (terracotta) — primary community/social layer color */
  --color-accent-warm: #E8703A;
  --color-accent-warm-strong: #C2531F;
  --color-accent-warm-soft: #F0997B;
  --color-accent-warm-tint: #FAECE7;

  /* Purple accent — events, secondary accents */
  --color-accent-purple: #7C3AED;
  --color-accent-purple-soft: #A78BFA;
  --color-accent-purple-tint: #EEEDFE;

  /* ====== SURFACE & BACKGROUNDS ====== */
  /* Light mode backgrounds */
  --color-bg-light: #F6F8FA;
  --color-bg-warm: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F5F9;
  --color-surface-elevated: #FAFBFC;

  /* Dark mode backgrounds */
  --color-bg-dark: #0B1120;
  --color-surface-dark: #111827;
  --color-surface-dark-muted: #1E293B;
  --color-surface-dark-elevated: #1F2937;

  /* ====== TEXT COLORS (Light Mode) ====== */
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;

  /* ====== TEXT COLORS (Dark Mode) ====== */
  --color-text-dark: #F1F5F9;
  --color-text-dark-secondary: #94A3B8;
  --color-text-dark-muted: #64748B;

  /* ====== BORDERS & DIVIDERS ====== */
  /* Light mode borders */
  --color-border: #E2E8F0;
  --color-border-subtle: #F1F5F9;

  /* Dark mode borders */
  --color-border-dark: #334155;
  --color-border-dark-subtle: #292E3E;

  /* ====== SEMANTIC STATUS COLORS ====== */
  --color-success: #16A34A;
  --color-success-tint: #DCFCE7;
  --color-success-dark: #4ADE80;

  --color-warning: #D97706;
  --color-warning-tint: #FAEEDA;
  --color-warning-dark: #FBBF24;

  --color-danger: #DC2626;
  --color-danger-tint: #FEE2E2;
  --color-danger-dark: #F87171;

  --color-info: #2563EB;
  --color-info-tint: #DBEAFE;
  --color-info-dark: #60A5FA;

  /* ====== COMMUNITY POST TYPE COLORS ====== */
  --color-post-type-question: #2563EB;
  --color-post-type-recommendation: #0D9488;
  --color-post-type-discussion: #64748B;
  --color-post-type-event: #7C3AED;
  --color-post-type-lost-found: #D97706;
  --color-post-type-marketplace: #059669;
  --color-post-type-help: #E11D48;
  --color-post-type-live: #D97706;

  /* ====== ISSUE CATEGORY COLORS ====== */
  --color-issue-plumbing: #0891B2;
  --color-issue-electrical: #D97706;
  --color-issue-elevator: #4F46E5;
  --color-issue-cleanliness: #0D9488;
  --color-issue-landscaping: #16A34A;

  /* ====== TYPOGRAPHY ====== */
  /* Font families */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Font sizes (px) */
  --font-size-display: 40px;
  --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-small: 14px;
  --font-size-caption: 12px;
  --font-size-micro: 11px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-display: 1.1;
  --line-height-h1: 1.2;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;
  --line-height-h4: 1.35;
  --line-height-body-lg: 1.6;
  --line-height-body: 1.6;
  --line-height-small: 1.5;
  --line-height-caption: 1.4;

  /* Letter spacing */
  --letter-spacing-display: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-button: 0.02em;

  /* ====== SPACING (4px base grid) ====== */
  --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-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ====== SHADOWS (Light Mode) ====== */
  --shadow-none: none;
  --shadow-xs: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.15);
  --shadow-lg: 0 20px 50px rgba(15, 118, 110, 0.15);
  --shadow-card: 0 6px 22px rgba(15, 23, 42, 0.18);
  --shadow-sticker: 0 8px 18px rgba(15, 23, 42, 0.25);

  /* ====== SHADOWS (Dark Mode) ====== */
  --shadow-dark-xs: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-dark-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-dark-md: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-dark-lg: 0 20px 50px rgba(0, 0, 0, 0.7);

  /* ====== TRANSITIONS & ANIMATION ====== */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  --transition-ease-in: 200ms ease-in;
  --transition-ease-in-out: 200ms ease-in-out;

  /* ====== FOCUS RING ====== */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-brand);
  --focus-ring-outline: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  --focus-ring-outline-dark: 0 0 0 var(--focus-ring-width) var(--color-brand-soft);

  /* ====== CONTAINER WIDTHS ====== */
  --width-mobile: 100%;
  --width-feed: 680px;
  --width-content: 960px;
  --width-max: 1280px;

  /* ====== GUTTER (Side margins) ====== */
  --gutter-mobile: 16px;
  --gutter-tablet: 20px;
  --gutter-desktop: 32px;
}

/* ====== DARK MODE OVERRIDES ====== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override light defaults with dark values */
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-muted: var(--color-surface-dark-muted);
    --color-surface-elevated: var(--color-surface-dark-elevated);
    --color-text: var(--color-text-dark);
    --color-text-secondary: var(--color-text-dark-secondary);
    --color-text-muted: var(--color-text-dark-muted);
    --color-border: var(--color-border-dark);
    --color-border-subtle: var(--color-border-dark-subtle);
  }
}

/* Explicit .dark class strategy (for user-controlled theme toggle) */
.dark {
  color-scheme: dark;
  --color-bg: var(--color-bg-dark);
  --color-surface: var(--color-surface-dark);
  --color-surface-muted: var(--color-surface-dark-muted);
  --color-surface-elevated: var(--color-surface-dark-elevated);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);
  --color-border: var(--color-border-dark);
  --color-border-subtle: var(--color-border-dark-subtle);
}

/* ====== UTILITY CLASSES ====== */

/* Focus ring utility (apply to interactive elements) */
.focus-ring {
  outline: none;
  box-shadow: var(--focus-ring-outline);
}

.dark .focus-ring {
  box-shadow: var(--focus-ring-outline-dark);
}

/* Font display utility */
.font-display {
  font-family: var(--font-display);
}

/* Typography preset classes */
.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

.text-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h1);
}

.text-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-h2);
}

.text-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h3);
}

.text-body-lg {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-lg);
}

.text-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-small);
}

.text-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
}

/* Transition utilities */
.transition-fast {
  transition: all var(--transition-fast);
}

.transition-base {
  transition: all var(--transition-base);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* Shadow utilities */
.shadow-soft-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-soft-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-soft-md {
  box-shadow: var(--shadow-md);
}

.shadow-soft-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.shadow-sticker {
  box-shadow: var(--shadow-sticker);
}

.dark .shadow-card {
  box-shadow: var(--shadow-dark-sm);
}

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

/* ====== SEMANTIC COLOR ALIASES ====== */

/* Map post types to their colors (for use in component utilities) */
.post-type-question { --post-color: var(--color-post-type-question); }
.post-type-recommendation { --post-color: var(--color-post-type-recommendation); }
.post-type-discussion { --post-color: var(--color-post-type-discussion); }
.post-type-event { --post-color: var(--color-post-type-event); }
.post-type-lost-found { --post-color: var(--color-post-type-lost-found); }
.post-type-marketplace { --post-color: var(--color-post-type-marketplace); }
.post-type-help { --post-color: var(--color-post-type-help); }
.post-type-live { --post-color: var(--color-post-type-live); }

/* Post type badge template */
.post-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--post-color);
  color: white;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
}

/* ====== CONTAINER QUERIES (OPTIONAL, for future) ====== */
@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
  }
}