/*
 * IMPACT SOURCE — Core Stylesheet
 * This file complements Tailwind with CSS custom properties,
 * font imports, and component-level refinements.
 *
 * Load order: output.css (compiled Tailwind) -> this file
 */

/* ─── FONT IMPORTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ─── CSS CUSTOM PROPERTIES ────────────────────────────────── */
:root {
  /* Brand palette — mirrored from Tailwind for use in non-Tailwind contexts */
  --color-midnight:     #0F1D2F;
  --color-midnight-700: #1A2E4D;
  --color-midnight-500: #3A5A85;
  --color-midnight-200: #B1C1D6;
  --color-midnight-100: #D8E0EB;

  --color-gold:         #C4913E;
  --color-gold-400:     #D4A853;
  --color-gold-200:     #EDDCB8;
  --color-gold-100:     #F5EBDA;
  --color-gold-50:      #FBF7F0;

  --color-teal:         #1A7A6D;
  --color-teal-400:     #3BBBAA;
  --color-teal-200:     #A3E5DB;

  --color-coral:        #C75B3A;

  --color-ivory:        #FAF8F5;
  --color-ivory-200:    #F3EFE9;
  --color-ivory-300:    #E8E3DA;

  --color-slate:        #2D3748;
  --color-slate-500:    #6B7A8D;
  --color-slate-300:    #B0B9C9;
  --color-slate-200:    #D5DAE3;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing rhythm */
  --space-unit: 0.5rem;   /* 8px base unit */

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── BASE RESETS & DEFAULTS ───────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: var(--color-gold-200);
  color: var(--color-midnight);
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}


/* ─── UTILITY CLASSES ──────────────────────────────────────── */

.text-balance {
  text-wrap: balance;
}

.border-subtle {
  border-color: var(--color-ivory-300);
}

.bg-pattern {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(196, 145, 62, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(26, 122, 109, 0.03) 0%, transparent 50%);
}

/* Fine dot grid — for dashboard/graph backgrounds */
.bg-dots {
  background-image: radial-gradient(circle, var(--color-slate-200) 0.75px, transparent 0.75px);
  background-size: 20px 20px;
}

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, var(--color-midnight) 0%, var(--color-midnight-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─── ANIMATION UTILITIES ──────────────────────────────────── */

.animate-in {
  animation: fadeSlideIn 0.5s ease-out forwards;
  opacity: 0;
}

.animate-in-delay-1 { animation-delay: 0.1s; }
.animate-in-delay-2 { animation-delay: 0.2s; }
.animate-in-delay-3 { animation-delay: 0.3s; }
.animate-in-delay-4 { animation-delay: 0.4s; }

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

/* Skeleton loading state */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-ivory-200) 25%,
    var(--color-ivory-300) 50%,
    var(--color-ivory-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.25rem;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}