/* Fonts are loaded async in index.html - no @import needed */

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

@layer base {
  :root {
    /* Light Mode — warm paper + burnt ember */
    --background: 0 0% 98%;             /* #FAFAFA */
    --foreground: 0 0% 9%;              /* #171717 */
    --muted: 0 0% 94%;                  /* #F0F0F0 */
    --muted-foreground: 0 0% 32%;        /* #525252 */
    --card: 0 0% 100%;                   /* #FFFFFF */
    --card-foreground: 0 0% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
    --border: 0 0% 90%;                  /* #E5E5E5 */
    --input: 0 0% 90%;
    --ring: 17 92% 36%;                  /* #A73408 — deeper burnt ember, WCAG AA */
    --primary: 17 92% 36%;               /* deeper burnt ember — passes AA on primary/10 tints */
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 94%;
    --secondary-foreground: 0 0% 9%;
    --accent: 17 90% 52%;                /* #EA580C */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 74% 42%;
    --destructive-foreground: 0 0% 100%;
    --cta: 17 92% 36%;                   /* #A73408 — burnt ember, passes AA on tints (5.7:1+) */
    --cta-foreground: 0 0% 100%;
    --radius: 0.5rem;
  }

  .dark {
    /* Dark Mode — warm charcoal + ember, brand-tuned */
    --background: 20 8% 7%;              /* #131110 — warm near-black */
    --foreground: 30 15% 96%;            /* #F7F3EE — warm off-white, easier on eyes than pure white */
    --muted: 20 6% 13%;                  /* #221F1D — warm surface */
    --muted-foreground: 25 10% 72%;      /* #BDB4AC — high-contrast warm gray (WCAG AA on --background) */
    --card: 20 7% 10%;                   /* #1B1917 — cards lift subtly above bg */
    --card-foreground: 30 15% 96%;
    --popover: 20 7% 10%;
    --popover-foreground: 30 15% 96%;
    --border: 20 6% 42%;                 /* #716864 — meets WCAG 1.4.11 (3:1) on bg + card for UI boundaries */
    --input: 20 6% 42%;                  /* form field boundary — 3:1 on bg */
    --ring: 17 95% 62%;                  /* #F16A3F — brighter ember for focus visibility */
    --primary: 17 95% 62%;               /* #F16A3F — brand ember, brightened for dark bg contrast */
    --primary-foreground: 20 15% 8%;     /* dark text on ember buttons — better than white on orange */
    --secondary: 20 6% 13%;
    --secondary-foreground: 30 15% 96%;
    --accent: 20 100% 72%;               /* #FFA07A — warm coral for subtle highlights */
    --accent-foreground: 20 15% 8%;
    --destructive: 0 78% 62%;
    --destructive-foreground: 0 0% 98%;
    --cta: 17 95% 62%;                   /* #F16A3F — matches primary */
    --cta-foreground: 20 15% 8%;         /* dark text on ember for AA contrast */
  }

  * {
    @apply border-border;
  }

  /* Smooth scroll on desktop only - mobile uses native momentum */
  @media (pointer: fine) {
    html {
      scroll-behavior: smooth;
    }
  }
  
  /* Non-pointer devices also get smooth scroll if preferred */
  @media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    html {
      scroll-behavior: auto; /* Native momentum on touch */
    }
  }

  body {
    @apply bg-background text-foreground antialiased;
    overflow-x: hidden;
    letter-spacing: -0.01em;
  }

  /* Theme transition - only applied during toggle */
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition: background-color 0.3s ease-out, 
                border-color 0.3s ease-out, 
                color 0.2s ease-out,
                box-shadow 0.3s ease-out !important;
  }

  .font-inter {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
  }

  .font-space {
    font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'ss02', 'ss03';
  }

  /* Focus styles for accessibility */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background rounded-sm;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-0 border-ring;
  }
}

@layer components {
  /* ------------------------------------------------------------------
   * Screenshot overlay tokens
   * ------------------------------------------------------------------
   * Shared scrim + caption chip styling for any surface that renders a
   * caption over a product screenshot (gallery hero tile, gallery
   * thumbnails, lightbox media, related modals). Centralized so every
   * overlay has identical contrast, blur, radius and dark-mode tuning.
   *
   * Tunables live as CSS custom properties so a single change re-themes
   * every consumer. Values are theme-agnostic on purpose — screenshots
   * carry their own light/dark palette and need a fixed-luminance
   * gradient underneath to guarantee WCAG-safe caption contrast.
   */
  :root {
    --scrim-caption-start: 0 0% 0% / 0.70;   /* bottom (opaque) stop */
    --scrim-caption-mid:   0 0% 0% / 0.30;   /* mid stop for soft falloff */
    --scrim-caption-end:   0 0% 0% / 0;      /* top (transparent) stop */
    --scrim-caption-h:     6rem;             /* default scrim height */
    --scrim-caption-h-sm:  4rem;             /* compact scrim (thumbnails) */
  }

  /* Full-width bottom scrim behind a caption. Use on the media wrapper
     with `position: relative`. Pair with `.caption-chip` for the label. */
  .scrim-caption {
    @apply pointer-events-none absolute inset-x-0 bottom-0;
    height: var(--scrim-caption-h);
    background-image: linear-gradient(
      to top,
      hsl(var(--scrim-caption-start)) 0%,
      hsl(var(--scrim-caption-mid)) 45%,
      hsl(var(--scrim-caption-end)) 100%
    );
  }

  /* Compact variant for gallery thumbnails and small lightbox tiles. */
  .scrim-caption-sm {
    @apply pointer-events-none absolute inset-x-0 bottom-0;
    height: var(--scrim-caption-h-sm);
    background-image: linear-gradient(
      to top,
      hsl(var(--scrim-caption-start)) 0%,
      hsl(0 0% 0% / 0.25) 50%,
      hsl(var(--scrim-caption-end)) 100%
    );
  }

  /* Caption chip that sits on top of a scrim. High-contrast in both
     themes because the scrim beneath is always dark. */
  .caption-chip {
    @apply inline-flex items-center gap-1.5 rounded-md px-2.5 py-1;
    @apply text-[11px] font-semibold leading-none;
    @apply bg-white/95 dark:bg-card/95 text-neutral-900 dark:text-foreground;
    @apply border border-black/5 dark:border-border shadow-sm backdrop-blur-sm;
  }

  /* Smaller chip for thumbnails / dense grids. */
  .caption-chip-sm {
    @apply inline-flex items-center rounded px-2 py-0.5;
    @apply text-[10px] font-medium leading-none;
    @apply bg-white/95 dark:bg-card/95 text-neutral-900 dark:text-foreground;
    @apply border border-black/5 dark:border-border shadow-sm backdrop-blur-sm;
  }

  /* Primary CTA — ember, minimal */
  .btn-primary {
    @apply inline-flex items-center justify-center font-medium transition-all duration-200;
    @apply bg-cta text-cta-foreground hover:bg-cta/90;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }

  /* Secondary button — ghost */
  .btn-secondary {
    @apply inline-flex items-center justify-center font-medium transition-all duration-200;
    @apply border border-border bg-transparent text-foreground hover:border-primary hover:text-primary;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }

  /* Fade-in animation - uses Tailwind's fade-in keyframe */
  .animate-fade-in {
    animation: fade-in 0.25s ease-out forwards;
  }

  /* Interactive card with lift effect */
  .card-lift {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  }

  .card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -12px hsl(var(--foreground) / 0.15);
  }

  .dark .card-lift:hover {
    box-shadow: 0 12px 40px -12px hsl(var(--primary) / 0.2);
  }

  /* Shimmer loading skeleton */
  .shimmer {
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--muted-foreground) / 0.1) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }

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

  /* Icon hover spin */
  .icon-hover-spin {
    transition: transform 0.3s ease-out;
  }

  .group:hover .icon-hover-spin {
    transform: rotate(12deg) scale(1.1);
  }

  /* Staggered children animation - desktop only via sm:stagger-children */
  .sm\:stagger-children > * {
    opacity: 1; /* Mobile: instant visibility for LCP */
  }

  @media (min-width: 640px) {
    .sm\:stagger-children > * {
      opacity: 0;
      animation: fade-in 0.4s ease-out forwards;
    }

    .sm\:stagger-children > *:nth-child(1) { animation-delay: 0ms; }
    .sm\:stagger-children > *:nth-child(2) { animation-delay: 50ms; }
    .sm\:stagger-children > *:nth-child(3) { animation-delay: 100ms; }
    .sm\:stagger-children > *:nth-child(4) { animation-delay: 150ms; }
    .sm\:stagger-children > *:nth-child(5) { animation-delay: 200ms; }
    .sm\:stagger-children > *:nth-child(6) { animation-delay: 250ms; }
  }

  /* Focus ring animation */
  .focus-ring-animated:focus-visible {
    animation: ringPulse 1s ease-out;
  }

  @keyframes ringPulse {
    0% { box-shadow: 0 0 0 0 hsl(var(--ring) / 0.5); }
    100% { box-shadow: 0 0 0 4px hsl(var(--ring) / 0); }
  }
}

/* Global keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Custom scrollbar - subtle */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Reduced motion - accessibility */
@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;
  }

  /* Gallery/overlay-specific hardening: keep captions and scrims fully
     visible with no transform, opacity, or filter motion. Ensures the
     caption-fade and hover-reveal overlays never animate for users who
     opted out of motion, and reveal targets stay in their resting state
     instead of flashing on hover. */
  .scrim-caption,
  .scrim-caption-sm,
  .caption-chip,
  .caption-chip-sm {
    transition: none !important;
    animation: none !important;
  }

  /* Neutralize hover zoom/lift on gallery media and cards. */
  .group:hover .group-hover\:scale-\[1\.02\],
  .group:hover .group-hover\:scale-\[1\.03\],
  .group\/img:hover .group-hover\/img\:scale-\[1\.02\],
  .hover\:-translate-y-1:hover,
  .card-lift:hover {
    transform: none !important;
  }

  /* Hover-revealed overlay affordances (e.g. expand icon on gallery
     tiles) stay visible at rest instead of fading in on hover. */
  .group\/img .group-hover\/img\:opacity-100,
  .group .group-hover\:opacity-100 {
    opacity: 1 !important;
  }

  /* Stop the decorative "live" pulse dot in caption chips. */
  .caption-chip .animate-pulse,
  .caption-chip-sm .animate-pulse {
    animation: none !important;
  }

  /* Scroll-triggered fade/rise utilities (revealClass) — force resting
     visible state so nothing stays hidden waiting for an observer that
     we've bypassed for reduced-motion users. */
  .opacity-0 {
    opacity: 1 !important;
  }
  .translate-y-4,
  .translate-y-8 {
    transform: none !important;
  }
  /* Kill the fade-in keyframe entrance too. */
  .animate-fade-in {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* CSS Containment + Content-visibility for major sections - maximizes rendering perf */
.cv-industries { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 600px;
  contain: layout style paint;
}
.cv-showcase { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 700px;
  contain: layout style paint;
}
.cv-integrations { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 200px;
  contain: layout style paint;
}
.cv-faq { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 400px;
  contain: layout style paint;
}
.cv-contact { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 500px;
  contain: layout style paint;
}
.cv-footer { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 300px;
  contain: layout style paint;
}

/* Hero section - visible on load, still benefits from containment */
.contain-hero {
  contain: layout style;
}

/* Work carousel - no content-visibility (visible early), but contained */
.contain-work {
  contain: layout style paint;
}

@media (max-width: 768px) {
  .cv-industries { contain-intrinsic-size: auto 800px; }
  .cv-showcase { contain-intrinsic-size: auto 900px; }
  .cv-faq { contain-intrinsic-size: auto 500px; }
  .cv-contact { contain-intrinsic-size: auto 600px; }
}

/* Touch device fixes - disable sticky hover states */
@media (hover: none), (pointer: coarse) {
  button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* Safe area padding for notched devices (iPhone X+) */
.safe-padding-x {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@supports (padding: max(0px)) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}