/**
 * TAC Design Tokens v4.0
 * ======================
 *
 * Single source of truth for all design tokens across the TAC ecosystem.
 * Import this file in any package that needs access to the design system.
 *
 * Usage:
 *   @import '@tac/design-tokens/tokens.css';
 *
 *   .my-element {
 *     color: var(--tac-emerald-600);
 *     background: var(--tac-surface-light);
 *   }
 *
 * @version 4.0.0
 */

/* Local brand fonts; copyright and OFL notices are in brand-fonts/. */
@font-face {
  font-family: 'Figtree';
  src: url("/assets/brand-fonts/Figtree-Variable-3cf43f01.woff2") format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'El Messiri';
  src: url("/assets/brand-fonts/ElMessiri-Variable-3dbdabed.woff2") format('woff2');
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root,
:host {
  /* ==========================================================================
     COLOR PALETTE
     ========================================================================== */

  /* Primary: Emerald Scale (Brand) */
  --tac-emerald-50: #e6efee;
  --tac-emerald-100: #c5d7d5;
  --tac-emerald-200: #a1bdba;
  --tac-emerald-300: #7ca39e;
  --tac-emerald-400: #5e918a;
  --tac-emerald-500: #427973;
  --tac-emerald-600: #045D56; /* PRIMARY - Brand color */
  --tac-emerald-700: #034a45;
  --tac-emerald-800: #023733;
  --tac-emerald-900: #012422;
  --tac-emerald-950: #011816;

  /* Accent: Gold Scale */
  --tac-gold-50: #fff9e6;
  --tac-gold-100: #fff0c4;
  --tac-gold-200: #ffe7a1;
  --tac-gold-300: #ffdc7d;
  --tac-gold-400: #ffd45a;
  --tac-gold-500: #ffcb38;
  --tac-gold-600: #FFC300; /* ACCENT - Brand accent */
  --tac-gold-700: #cc9c00;
  --tac-gold-800: #997500;
  --tac-gold-900: #664e00;

  /* Warm Neutral Scale (TAC product palette) */
  --tac-warm-50:  #faf8f5;
  --tac-warm-100: #f5f1e8; /* base-100 background */
  --tac-warm-200: #efeadd; /* base-200 / card surfaces */
  --tac-warm-300: #e8ddc3; /* border color */
  --tac-warm-400: #d4c4a0;
  --tac-warm-500: #9e9280; /* muted foreground */
  --tac-warm-600: #6e6456; /* secondary text */
  --tac-warm-700: #5f564b; /* body text secondary */
  --tac-warm-800: #3d362c; /* body text */
  --tac-warm-900: #1f1915; /* base-content / primary text */
  --tac-warm-950: #0e0d0a;

  /* Neutral: Slate Scale */
  --tac-slate-50: #f8fafc;
  --tac-slate-100: #f1f5f9;
  --tac-slate-200: #e2e8f0;
  --tac-slate-300: #cbd5e1;
  --tac-slate-400: #94a3b8;
  --tac-slate-500: #64748b;
  --tac-slate-600: #475569;
  --tac-slate-700: #334155;
  --tac-slate-800: #1e293b;
  --tac-slate-900: #0f172a;
  --tac-slate-950: #020617;

  /* Semantic Colors */
  --tac-success: #16a34a;
  --tac-success-light: #dcfce7;
  --tac-warning: #f59e0b;
  --tac-warning-light: #fef3c7;
  --tac-error: #ef4444;
  --tac-error-light: #fee2e2;
  --tac-info: #0ea5e9;
  --tac-info-light: #e0f2fe;

  /* ==========================================================================
     SURFACES
     ========================================================================== */
  --tac-surface-dark: #022825;
  --tac-surface-light: #f5fbf9;
  --tac-surface-white: #ffffff;
  --tac-surface-glass: rgba(255, 255, 255, 0.85);
  --tac-surface-glass-dark: rgba(4, 93, 86, 0.08);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --tac-font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --tac-font-display: 'El Messiri', Georgia, 'Times New Roman', serif;

  /* Font Sizes */
  --tac-text-xs: 0.75rem;    /* 12px */
  --tac-text-sm: 0.875rem;   /* 14px */
  --tac-text-base: 1rem;     /* 16px */
  --tac-text-lg: 1.125rem;   /* 18px */
  --tac-text-xl: 1.25rem;    /* 20px */
  --tac-text-2xl: 1.5rem;    /* 24px */
  --tac-text-3xl: 1.875rem;  /* 30px */
  --tac-text-4xl: 2.25rem;   /* 36px */

  /* Font Weights */
  --tac-font-normal: 400;
  --tac-font-medium: 500;
  --tac-font-semibold: 600;
  --tac-font-bold: 700;

  /* Line Heights */
  --tac-leading-tight: 1.25;
  --tac-leading-snug: 1.375;
  --tac-leading-normal: 1.5;
  --tac-leading-relaxed: 1.625;

  /* ==========================================================================
     SPACING
     ========================================================================== */
  --tac-space-1: 0.25rem;   /* 4px */
  --tac-space-2: 0.5rem;    /* 8px */
  --tac-space-3: 0.75rem;   /* 12px */
  --tac-space-4: 1rem;      /* 16px */
  --tac-space-5: 1.25rem;   /* 20px */
  --tac-space-6: 1.5rem;    /* 24px */
  --tac-space-8: 2rem;      /* 32px */
  --tac-space-10: 2.5rem;   /* 40px */
  --tac-space-12: 3rem;     /* 48px */

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */
  --tac-radius-sm: 0.375rem;   /* 6px */
  --tac-radius-md: 0.5rem;     /* 8px */
  --tac-radius-lg: 0.75rem;    /* 12px */
  --tac-radius-xl: 1rem;       /* 16px */
  --tac-radius-2xl: 1.25rem;   /* 20px */
  --tac-radius-3xl: 1.5rem;    /* 24px */
  --tac-radius-full: 9999px;   /* Pill shape */

  /* ==========================================================================
     SHADOWS
     ========================================================================== */
  --tac-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tac-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tac-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tac-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Brand Shadows */
  --tac-shadow-emerald: 0 12px 24px -8px rgba(4, 93, 86, 0.35);
  --tac-shadow-emerald-lg: 0 20px 40px -12px rgba(4, 93, 86, 0.45);
  --tac-shadow-gold: 0 12px 24px -8px rgba(255, 195, 0, 0.45);
  --tac-shadow-gold-lg: 0 18px 30px -10px rgba(255, 195, 0, 0.55);

  /* Glass Effect Shadows */
  --tac-shadow-glass: 0 8px 32px -8px rgba(2, 40, 37, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */
  --tac-transition-fast: 150ms ease;
  --tac-transition-normal: 200ms ease;
  --tac-transition-slow: 300ms ease;
  --tac-transition-spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */
  --tac-z-base: 1;
  --tac-z-dropdown: 1000;
  --tac-z-sticky: 1020;
  --tac-z-fixed: 1030;
  --tac-z-modal-backdrop: 1040;
  --tac-z-modal: 1050;
  --tac-z-popover: 1060;
  --tac-z-tooltip: 1070;
  --tac-z-floater: 2147483646;
  --tac-z-max: 2147483647;
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes tac-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes tac-pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes tac-recording-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 195, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 195, 0, 0);
  }
}

@keyframes tac-gold-glow {
  0%, 100% {
    box-shadow: 0 0 20px 4px rgba(255, 195, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 30px 8px rgba(255, 195, 0, 0.6);
  }
}

@keyframes tac-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes tac-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes tac-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tac-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tac-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@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;
  }
}