@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light mode (default) */
  :root {
    /* Backgrounds & Surfaces - DRAMATIC CONTRAST */
    --background: 220 15% 96%; /* Light blue-gray background */
    --surface: 0 0% 100%; /* Pure white - cards really pop! */
    --surface-elevated: 0 0% 100%; /* White (elevated) */
    --surface-overlay: 0 0% 100%; /* White overlays */

    /* Foreground (Text) */
    --foreground: 222 47% 11%; /* Almost black */
    --foreground-secondary: 215 25% 35%; /* Much darker for readability */
    --foreground-tertiary: 215 20% 50%; /* Medium gray */
    --foreground-muted: 215 16% 65%; /* Light gray */

    /* Borders - MUCH MORE VISIBLE */
    --border: 214 25% 80%; /* Strong medium gray */
    --border-strong: 214 30% 60%; /* Dark gray for emphasis */
    --border-subtle: 214 20% 88%; /* Subtle but visible */

    /* Interactive States - MODERN & REFINED */
    --primary: 221 83% 53%; /* Sophisticated blue */
    --primary-foreground: 0 0% 100%; /* White text */
    --secondary: 220 15% 90%; /* Subtle gray-blue bg */
    --secondary-foreground: 222 47% 11%; /* Dark text */
    --accent: 221 75% 95%; /* Soft blue tint */
    --accent-foreground: 221 70% 35%; /* Rich blue text */
    --muted: 220 15% 92%; /* Subtle muted bg */
    --muted-foreground: 215 25% 40%; /* Darker muted text */

    /* Status Colors - Modern Editorial Palette */
    --success: 152 57% 45%; /* Refined emerald green */
    --success-foreground: 0 0% 100%; /* White text on success */
    --error: 0 65% 51%; /* Sophisticated red, less harsh */
    --error-foreground: 0 0% 100%; /* White text on error */
    --warning: 36 100% 50%; /* Warm sophisticated amber */
    --warning-foreground: 0 0% 100%; /* White text on warning */
    --info: 210 100% 56%; /* Cool modern blue */
    --info-foreground: 0 0% 100%; /* White text on info */

    /* Destructive (legacy) */
    --destructive: 0 65% 51%; /* Match error color */
    --destructive-foreground: 0 0% 100%;

    /* Form Elements */
    --input: 214 32% 91%;
    --ring: 222 84% 5%;
    --ring-offset: 0 0% 100%;

    /* Grid/Blueprint Pattern */
    --grid-color: 214 32% 90%;
    --grid-size: 24px; /* Grid cell size */

    /* Card */
    --card: 0 0% 100%; /* Pure white - stands out dramatically on blue-gray background */
    --card-foreground: 222 47% 11%;

    /* Border Radii */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius: var(--radius-md);

    /* Spacing - Editorial scale for airy layouts */
    --spacing-section: 6rem; /* 96px - Between major sections */
    --spacing-component: 3rem; /* 48px - Between components */
    --spacing-element: 1.5rem; /* 24px - Between related elements */
    --spacing-tight: 0.75rem; /* 12px - Tight groupings */
    --spacing-comfortable: 2rem; /* 32px - Comfortable breathing room */

    /* Typography */
    --font-sans: var(--font-sans), -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: var(--font-mono), "SF Mono", Consolas, monospace;

    /* Editorial Line Heights - Airy, readable */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    --leading-editorial: 1.8; /* Extra generous for body copy */

    /* Letter Spacing - Technical precision */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Brutalist Accent Colors - Modern Editorial */
    --brutalist-accent: 221 83% 53%; /* Sophisticated blue */
    --brutalist-accent-hover: 221 83% 45%; /* Slightly deeper on hover */
  }

  /* Dark mode (opt-in) - Vercel/Cursor/Perplexity aesthetic */
  .dark {
    /* Backgrounds & Surfaces */
    --background: 210 10% 5%; /* #0d0d0f - Almost black */
    --surface: 210 10% 8%; /* #14141a - Slightly lighter */
    --surface-elevated: 210 10% 12%; /* #1c1c24 - Cards, modals */
    --surface-overlay: 210 10% 16%; /* #25252f - Overlays, popovers */

    /* Foreground (Text) */
    --foreground: 210 10% 90%; /* #e3e3e8 - Primary text */
    --foreground-secondary: 210 8% 60%; /* #949499 - Secondary text */
    --foreground-tertiary: 210 6% 40%; /* #64646a - Tertiary text */
    --foreground-muted: 210 6% 30%; /* #4a4a50 - Muted text */

    /* Borders (1px, subtle) */
    --border: 210 10% 20%; /* #30303a - Default border */
    --border-strong: 210 12% 30%; /* #494954 - Emphasized border */
    --border-subtle: 210 8% 15%; /* #22222c - Subtle border */

    /* Interactive States */
    --primary: 210 10% 98%; /* White-ish for dark mode */
    --primary-foreground: 210 10% 5%; /* Dark text on light bg */
    --secondary: 210 10% 15%; /* Dark secondary */
    --secondary-foreground: 210 10% 90%; /* Light text on dark bg */
    --accent: 210 10% 18%; /* Accent background */
    --accent-foreground: 210 10% 95%; /* Accent text */
    --muted: 210 10% 12%; /* Muted background */
    --muted-foreground: 210 8% 60%; /* Muted text */

    /* Status Colors - Modern Editorial (Dark Mode) */
    --success: 152 57% 50%; /* Refined emerald - slightly brighter for dark */
    --success-foreground: 0 0% 100%; /* White text */
    --error: 0 65% 58%; /* Sophisticated red - brighter for dark */
    --error-foreground: 0 0% 100%; /* White text */
    --warning: 36 100% 55%; /* Warm amber - brighter for dark */
    --warning-foreground: 0 0% 100%; /* White text */
    --info: 210 100% 60%; /* Cool blue - brighter for dark */
    --info-foreground: 0 0% 100%; /* White text */

    /* Destructive (legacy support) */
    --destructive: 0 65% 58%;
    --destructive-foreground: 0 0% 100%;

    /* Form Elements */
    --input: 210 10% 20%; /* Input border */
    --ring: 210 10% 90%; /* Focus ring */
    --ring-offset: 210 10% 5%; /* Focus ring offset */

    /* Grid/Blueprint Pattern */
    --grid-color: 210 10% 15%; /* Grid line color */

    /* Card */
    --card: 210 10% 8%;
    --card-foreground: 210 10% 90%;

    /* Brutalist Accent Colors - Modern Editorial */
    --brutalist-accent: 210 100% 60%; /* Cool sophisticated blue for dark mode */
    --brutalist-accent-hover: 210 100% 65%; /* Slightly brighter on hover */
  }

  /* Base element styles */
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Grid/Blueprint background patterns */
  .grid-background {
    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: -1px -1px;
  }

  .dotted-grid-background {
    background-image: radial-gradient(circle, hsl(var(--grid-color)) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  .blueprint-background {
    background-color: hsl(var(--background));
    /* Major grid lines (4x size) */
    background-image: linear-gradient(hsl(var(--grid-color)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color)) 1px, transparent 1px),
      /* Minor grid lines (1x size) */
      linear-gradient(hsl(var(--grid-color) / 0.3) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--grid-color) / 0.3) 1px, transparent 1px);
    background-size: calc(var(--grid-size) * 4) calc(var(--grid-size) * 4),
      calc(var(--grid-size) * 4) calc(var(--grid-size) * 4), var(--grid-size) var(--grid-size),
      var(--grid-size) var(--grid-size);
  }

  /* Animated grid (subtle pulse) */
  .grid-background-animated {
    @apply grid-background;
    animation: grid-pulse 8s ease-in-out infinite;
  }

  @keyframes grid-pulse {
    0%,
    100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.6;
    }
  }
}

@layer utilities {
  /* Border utilities */
  .border-1 {
    border-width: 1px;
  }

  .border-dotted-1 {
    border-width: 1px;
    border-style: dotted;
  }

  .border-dashed-1 {
    border-width: 1px;
    border-style: dashed;
  }

  .border-dotted-2 {
    border-width: 2px;
    border-style: dotted;
  }

  /* Directional dotted borders */
  .border-t-dotted {
    border-top-width: 1px;
    border-top-style: dotted;
  }

  .border-b-dotted {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
  }

  .border-l-dotted {
    border-left-width: 1px;
    border-left-style: dotted;
  }

  .border-r-dotted {
    border-right-width: 1px;
    border-right-style: dotted;
  }

  /* Shadow utilities - Blueprint aesthetic */
  .shadow-blueprint {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 0 0 1px rgb(0 0 0 / 0.02);
  }

  .shadow-blueprint-hover {
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 0 0 1px rgb(0 0 0 / 0.03);
  }

  /* Transition presets */
  .transition-base {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .transition-all-smooth {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  /* Hover effects */
  .hover-lift {
    @apply transition-transform hover:-translate-y-0.5 hover:shadow-md;
  }

  /* Focus ring (modern, accessible) */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }

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

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

  .animate-slide-up {
    animation: slide-up 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .animate-shimmer {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--accent)) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 1000px 100%;
  }

  /* Brutalist Typography */
  .brutalist-heading {
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    text-transform: uppercase;
  }

  .brutalist-subheading {
    font-size: clamp(24px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  /* Brutalist Borders */
  .brutalist-border {
    border: 6px solid hsl(var(--foreground));
    border-radius: 0;
  }

  .brutalist-border-thick {
    border: 8px solid hsl(var(--foreground));
    border-radius: 0;
  }

  .brutalist-border-mega {
    border: 12px solid hsl(var(--foreground));
    border-radius: 0;
  }

  /* Brutalist Shadows - Hard, not soft */
  .brutalist-shadow {
    box-shadow: 0 10px 0 0 hsl(var(--brutalist-accent));
  }

  .brutalist-shadow-hover {
    box-shadow: 0 12px 0 0 hsl(var(--brutalist-accent));
  }

  .brutalist-shadow-sm {
    box-shadow: 0 6px 0 0 hsl(var(--brutalist-accent));
  }

  /* Glitch Animation */
  @keyframes glitch {
    0%,
    100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-5px);
    }
    40% {
      transform: translateX(5px);
    }
    60% {
      transform: translateX(-3px);
    }
    80% {
      transform: translateX(3px);
    }
  }

  .animate-glitch {
    animation: glitch 500ms ease-in-out;
  }

  /* Brutalist Entrance Animation */
  @keyframes brutalist-entrance {
    from {
      transform: translateY(40px) scale(0.9);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  .animate-brutalist-entrance {
    animation: brutalist-entrance 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Bar Growth Animation */
  @keyframes bar-grow {
    from {
      transform: scaleY(0);
      transform-origin: bottom;
    }
    to {
      transform: scaleY(1);
      transform-origin: bottom;
    }
  }

  .animate-bar-grow {
    animation: bar-grow 800ms ease-out forwards;
  }

  /* Stagger delays for entrance animations */
  .stagger-1 {
    animation-delay: 80ms;
  }
  .stagger-2 {
    animation-delay: 160ms;
  }
  .stagger-3 {
    animation-delay: 240ms;
  }
  .stagger-4 {
    animation-delay: 320ms;
  }
  .stagger-5 {
    animation-delay: 400ms;
  }

  /* Blueprint Scanline Animation */
  @keyframes scanline {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100vh);
    }
  }

  .blueprint-scanline {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(var(--brutalist-accent) / 0.3), transparent);
    animation: scanline 30s linear infinite;
    pointer-events: none;
    z-index: 1;
  }

  /* Slide Down Animation (for Activity Stream) */
  @keyframes slide-down {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-down {
    animation: slide-down 300ms ease-out forwards;
  }

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