/**
 * Brand Design Tokens
 * Asset Separation Tool - Design System
 *
 * Based on PRD v3 brand specifications
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@300;400;700&family=Nunito+Sans:wght@300;400;500;700&display=swap');

:root {
  /* === Typography === */

  /* Font Families */
  --font-heading: 'Aleo', Georgia, serif;
  --font-body:
    'Nunito Sans', 'Akzidenz-Grotesk BQ', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;

  /* Font Sizes - Standardized Scale (rem-based for accessibility) */
  --text-welcome: clamp(2rem, 4vw, 2.25rem); /* 32-36px - Responsive dashboard headings */
  --text-heading-1: 2.25rem; /* 36px - Page titles */
  --text-heading-2: 1.875rem; /* 30px - Section headers */
  --text-heading-3: 1.5rem; /* 24px - Subsection titles */
  --text-heading-4: 1.25rem; /* 20px - Card titles */
  --text-body: 1rem; /* 16px - Base interface text */
  --text-small: 0.875rem; /* 14px - Labels, secondary text */
  --text-xs: 0.75rem; /* 12px - Helper text, captions */

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* === Colors === */

  /* Primary Palette - Midnight Green */
  --brand-midnight: #134f5c;
  --brand-graphite: #434343;
  --brand-obsidian: #231f20;

  /* Accent Colors */
  --brand-turquoise: #3cb8a8; /* WCAG AA compliant - 4.5:1 contrast on Obsidian */
  --brand-rose: #e91e63; /* WCAG AA compliant - 4.5:1 contrast on Obsidian */
  --brand-wisteria: #b995c9; /* Decorative use only - not for text */
  --brand-carnation: #feaac0;
  --brand-moonstone: #76a5af; /* Decorative use only - not for text */

  /* Neutral Scale */
  --neutral-white: #ffffff;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* Semantic Colors */
  --color-success: var(--brand-turquoise);
  --color-error: var(--brand-rose);
  --color-warning: var(--brand-carnation);
  --color-info: var(--brand-wisteria);

  /* === Spacing System === */

  /* Brand Spacing - From PRD */
  --space-element: 18px; /* Between related elements */
  --space-component: 26.5px; /* Between components/cards */
  --space-section: 43.5px; /* Between major sections */

  /* Standard 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-brand: 28.5px; /* Primary brand radius */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-full: 9999px;

  /* === Shadows === */

  --shadow-subtle: 0 2px 8px rgba(35, 31, 32, 0.08);
  --shadow-card: 0 4px 16px rgba(35, 31, 32, 0.12);
  --shadow-elevated: 0 8px 24px rgba(35, 31, 32, 0.16);
  --shadow-focus: 0 0 0 3px rgba(103, 218, 202, 0.3);

  /* === Transitions === */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-Index Scale === */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-confirmation-backdrop: 1060;
  --z-confirmation: 1070;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* === Breakpoints (for reference in JS) === */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* === Typography Utility Classes === */

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

.font-light {
  font-weight: var(--font-light);
}

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

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

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

/* Heading Styles */
.h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  font-size: var(--text-welcome);
  line-height: var(--leading-tight);
}

.h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  font-size: var(--text-heading-2);
  line-height: var(--leading-snug);
}

.h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-light);
  font-size: var(--text-heading-3);
  line-height: var(--leading-snug);
}

.body {
  font-family: var(--font-body);
  font-weight: var(--font-light);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.body-emphasis {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

.body-emotional {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

/* === Spacing Utility Classes === */

.space-element {
  margin: var(--space-element);
}

.space-component {
  margin: var(--space-component);
}

.space-section {
  margin: var(--space-section);
}

.gap-element {
  gap: var(--space-element);
}

.gap-component {
  gap: var(--space-component);
}

.gap-section {
  gap: var(--space-section);
}

/* === Border Radius Utility Classes === */

.rounded-brand {
  border-radius: var(--radius-brand);
}

.rounded-brand-sm {
  border-radius: calc(var(--radius-brand) * 0.5); /* ~14px */
}

/* === Color Utility Classes === */

.bg-midnight {
  background-color: var(--brand-midnight);
}

.bg-turquoise {
  background-color: var(--brand-turquoise);
}

.bg-moonstone {
  background-color: var(--brand-moonstone);
}

.bg-rose {
  background-color: var(--brand-rose);
}

.bg-carnation {
  background-color: var(--brand-carnation);
}

.text-midnight {
  color: var(--brand-midnight);
}

.text-graphite {
  color: var(--brand-graphite);
}

.text-obsidian {
  color: var(--brand-obsidian);
}

.text-turquoise {
  color: var(--brand-turquoise);
}

.text-white {
  color: var(--neutral-white);
}

/* === Animation Keyframes === */

@keyframes dotRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes successFlash {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === Accessibility === */

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

/* 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;
    scroll-behavior: auto !important;
  }
}

/* Screen reader only content */
.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;
}