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

/*
  L.A Framework 2.0 — "The Room You Were In"
  Warm darkroom palette. Dark-first. All colors HSL.
*/

@layer base {
  :root {
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Light mode = "paper" — warm cream off-white, warm near-black ink */
    --background: 36 18% 96%;        /* paper */
    --foreground: 25 15% 12%;        /* ink */

    --card: 36 16% 98%;
    --card-foreground: 25 15% 12%;

    --popover: 36 16% 98%;
    --popover-foreground: 25 15% 12%;

    /* Primary = ink (warm near-black), used for type and outlines */
    --primary: 25 15% 12%;
    --primary-foreground: 36 18% 96%;

    --secondary: 30 14% 90%;
    --secondary-foreground: 25 15% 12%;

    --muted: 30 12% 92%;
    --muted-foreground: 25 8% 38%;

    --accent: 14 65% 52%;            /* ember — the red sharpie */
    --accent-foreground: 36 18% 96%;

    --destructive: 0 65% 50%;
    --destructive-foreground: 36 18% 96%;

    --border: 30 10% 84%;
    --input: 30 10% 86%;
    --ring: 14 65% 52%;

    /* Named tokens — the new vocabulary */
    --paper: 36 18% 96%;
    --ink: 25 15% 12%;
    --ember: 14 65% 52%;
    --silver: 30 6% 70%;
    --darkroom: 18 12% 8%;

    /* Legacy Nordic tokens kept as aliases so old usages don't break */
    --stone: 30 10% 84%;
    --moss: 30 14% 88%;
    --pine: 25 15% 18%;
    --frost: 36 16% 94%;
    --earth: 30 12% 70%;

    /* Gradients — gentler, paper-like */
    --gradient-hero: linear-gradient(180deg, hsl(var(--paper)) 0%, hsl(var(--frost)) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--frost)) 100%);

    /* Shadows */
    --shadow-soft: 0 4px 20px -6px hsl(var(--ink) / 0.10);
    --shadow-medium: 0 10px 36px -10px hsl(var(--ink) / 0.18);

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.25rem;

    --sidebar-background: 36 16% 98%;
    --sidebar-foreground: 25 15% 18%;
    --sidebar-primary: 25 15% 12%;
    --sidebar-primary-foreground: 36 18% 96%;
    --sidebar-accent: 30 12% 92%;
    --sidebar-accent-foreground: 25 15% 12%;
    --sidebar-border: 30 10% 84%;
    --sidebar-ring: 14 65% 52%;
  }

  .dark {
    /* Dark mode = "darkroom" — the default mode in 2.0 */
    --background: 18 12% 8%;          /* darkroom */
    --foreground: 36 14% 92%;

    --card: 20 10% 10%;
    --card-foreground: 36 14% 92%;

    --popover: 20 10% 10%;
    --popover-foreground: 36 14% 92%;

    --primary: 36 14% 92%;
    --primary-foreground: 18 12% 8%;

    --secondary: 22 8% 14%;
    --secondary-foreground: 36 14% 92%;

    --muted: 22 8% 14%;
    --muted-foreground: 30 8% 62%;

    --accent: 14 70% 56%;             /* ember — pops harder on dark */
    --accent-foreground: 18 12% 8%;

    --destructive: 0 62% 48%;
    --destructive-foreground: 36 14% 92%;

    --border: 22 8% 18%;
    --input: 22 8% 18%;
    --ring: 14 70% 56%;

    --paper: 36 14% 92%;
    --ink: 18 12% 8%;
    --silver: 30 6% 55%;
    --frost: 22 8% 14%;
    --stone: 22 8% 22%;
    --moss: 22 8% 18%;
    --pine: 36 14% 80%;
    --earth: 30 8% 35%;

    --shadow-soft: 0 4px 20px -6px hsl(0 0% 0% / 0.4);
    --shadow-medium: 0 10px 36px -10px hsl(0 0% 0% / 0.55);

    --sidebar-background: 20 10% 10%;
    --sidebar-foreground: 36 14% 88%;
    --sidebar-primary: 14 70% 56%;
    --sidebar-primary-foreground: 18 12% 8%;
    --sidebar-accent: 22 8% 14%;
    --sidebar-accent-foreground: 36 14% 92%;
    --sidebar-border: 22 8% 18%;
    --sidebar-ring: 14 70% 56%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    /* Subtle warm cast for analog feel */
    font-feature-settings: "ss01", "cv11";
  }

  /* Editorial display typography — used on H1s of marketing pages */
  h1, h2 {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    letter-spacing: -0.02em;
  }
}

@layer utilities {
  /* Fluid display heading — for marketing covers */
  .text-display {
    font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 300;
  }

  .text-display-xl {
    font-size: clamp(3rem, 0.5rem + 9vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-weight: 300;
  }

  /* Editorial italic word — used inside display headlines */
  .ital {
    font-style: italic;
    font-weight: 300;
  }

  /* Mono metadata — frame numbers, EXIF, datelines */
  .mono-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
  }

  /* Halation glow on bright image edges */
  .halation {
    box-shadow:
      0 0 1px hsl(var(--ember) / 0.0),
      inset 0 0 80px hsl(var(--ember) / 0.06);
  }

  /* "Develop in" entrance — replaces ken burns */
  @keyframes develop-in {
    0%   { filter: blur(8px) saturate(0.4) brightness(1.1); opacity: 0; transform: scale(1.03); }
    60%  { filter: blur(2px) saturate(0.85) brightness(1.02); opacity: 1; }
    100% { filter: blur(0) saturate(1) brightness(1); opacity: 1; transform: scale(1); }
  }

  .develop-in {
    animation: develop-in 1100ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .develop-in { animation: none; }
  }
}

/* ============================================================
   Film grain overlay — animated SVG noise, mounted once globally
   ============================================================ */
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -2%); }
  20%  { transform: translate(2%, 3%); }
  30%  { transform: translate(-1%, 4%); }
  40%  { transform: translate(3%, -3%); }
  50%  { transform: translate(-3%, 2%); }
  60%  { transform: translate(1%, -4%); }
  70%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(2%, -1%); }
  90%  { transform: translate(-1%, -2%); }
  100% { transform: translate(0, 0); }
}

.film-grain {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  animation: grain-shift 1200ms steps(8) infinite;
}

.dark .film-grain {
  opacity: 0.09;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
}

/* ============================================================
   Legacy hero animations (kept for compatibility during rollout)
   ============================================================ */
@keyframes ken-burns-hero {
  0%, 100% { transform: scale(1.30) translateX(-10px); }
  50%      { transform: scale(1.30) translateX(10px); }
}

.hero-animated {
  animation: ken-burns-hero 32s ease-in-out infinite;
  will-change: transform;
}

@media (max-width: 768px) {
  @keyframes ken-burns-hero {
    0%, 100% { transform: scale(1.38) translateX(-6px); }
    50%      { transform: scale(1.38) translateX(6px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-animated { animation: none; will-change: auto; }
}

/* Product card shimmer (CLS protection) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.product-card img {
  aspect-ratio: 4 / 5;
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted) / 0.8) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
}

.product-card img:not([src]) {
  animation: shimmer 1.5s infinite;
}

@keyframes ken-burns-fallback {
  0%   { transform: scale(1.08) translate(-2%, -2%); }
  50%  { transform: scale(1.12) translate(2%, 2%); }
  100% { transform: scale(1.08) translate(-2%, -2%); }
}

.ken-burns-fallback {
  animation: ken-burns-fallback 30s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ken-burns-fallback { animation: none; transform: scale(1.1); }
}