/**
 * theme-tokens.css - Single source of design tokens (colors, spacing, radii)
 * All pages must import this for consistent theming
 */

:root {
  /* Color Palette */
  --cream: #F7F3EA;
  --cream-deep: #EFE8D8;
  --indigo: #1F3A5F;
  --indigo-deep: #142A45;
  --maroon: #7A2E2E;
  --maroon-deep: #5E2222;
  --gold: #C9962B;
  --ink: #2A241C;
  --ink-soft: #5C5548;
  --white: #FFFFFF;

  /* Status Colors */
  --status-received-bg: #EFE3C7;
  --status-received-text: #8A6A1F;
  --status-review-bg: #DCE6F0;
  --status-review-text: var(--indigo);
  --status-resolved-bg: #DDEBD9;
  --status-resolved-text: #2E6B32;

  /* Role Badge Colors */
  --role-citizen-bg: #EFE3C7;
  --role-citizen-text: #8A6A1F;
  --role-admin-bg: #DCE6F0;
  --role-admin-text: var(--indigo);
  --role-developer-bg: var(--indigo-deep);
  --role-developer-text: var(--white);

  /* Spacing Scale */
  --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;

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Header Height */
  --header-h: 62px;

  /* Max Content Width */
  --max-width: 1180px;
  --max-width-narrow: 980px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(20,42,69,0.08);
  --shadow-md: 0 4px 12px rgba(20,42,69,0.1);
  --shadow-lg: 0 12px 35px rgba(20,42,69,0.18);
  --shadow-xl: 0 20px 60px rgba(20,42,69,0.22);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.28s cubic-bezier(0.32, 0, 0.18, 1);

  /* Z-Index Scale */
  --z-dropdown: 100;
  --z-header: 100;
  --z-drawer: 99;
  --z-overlay: 98;
  --z-modal: 200;
  --z-toast: 160;
  --z-sidebar: 45;
}

/* Utility classes using tokens */
.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-indigo { color: var(--indigo); }
.text-indigo-deep { color: var(--indigo-deep); }
.text-maroon { color: var(--maroon); }
.text-gold { color: var(--gold); }
.text-white { color: var(--white); }

.bg-cream { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }
.bg-indigo { background: var(--indigo); }
.bg-indigo-deep { background: var(--indigo-deep); }
.bg-maroon { background: var(--maroon); }
.bg-white { background: var(--white); }

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

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

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Minimum tap targets for accessibility */
button,
a,
input[type="submit"],
input[type="button"],
.btn,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* 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;
  }
}