@import '@fontsource-variable/inter';
@import '@fontsource-variable/jetbrains-mono';
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --font-inter: 'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
  --background: #FFFFFF;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #0A0A0A;
  --primary-foreground: #FFFFFF;
  --secondary: #F5F5F5;
  --secondary-foreground: #0A0A0A;
  --muted: #F5F5F5;
  --muted-foreground: #737373;
  --accent: #0A0A0A;
  --accent-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --border: #E5E5E5;
  --input: #F5F5F5;
  --ring: #0A0A0A;
  --chart-1: #0A0A0A;
  --chart-2: #525252;
  --chart-3: #737373;
  --chart-4: #A3A3A3;
  --chart-5: #D4D4D4;
  --radius: 0rem;
  --sidebar: #0A0A0A;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #FFFFFF;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #262626;
  --sidebar-ring: #FFFFFF;
}

.dark {
  --background: #0A0A0A;
  --foreground: #FAFAFA;
  --card: #0A0A0A;
  --card-foreground: #FAFAFA;
  --popover: #0A0A0A;
  --popover-foreground: #FAFAFA;
  --primary: #FAFAFA;
  --primary-foreground: #0A0A0A;
  --secondary: #171717;
  --secondary-foreground: #FAFAFA;
  --muted: #262626;
  --muted-foreground: #A3A3A3;
  --accent: #FAFAFA;
  --accent-foreground: #0A0A0A;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --border: #262626;
  --input: #171717;
  --ring: #FAFAFA;
  --chart-1: #FAFAFA;
  --chart-2: #A3A3A3;
  --chart-3: #737373;
  --chart-4: #525252;
  --chart-5: #262626;
  --sidebar: #171717;
  --sidebar-foreground: #FAFAFA;
  --sidebar-primary: #FAFAFA;
  --sidebar-primary-foreground: #0A0A0A;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #FAFAFA;
  --sidebar-border: #262626;
  --sidebar-ring: #FAFAFA;
}

@theme inline {
  --font-sans: var(--font-inter), 'Inter', system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), 'JetBrains Mono', ui-monospace, monospace;
  --font-display: var(--font-inter), 'Inter', system-ui, sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  
  html {
    scroll-behavior: smooth;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes reveal-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-reveal-up {
  animation: reveal-up 0.8s ease-out forwards;
}

.animate-reveal-left {
  animation: reveal-left 0.8s ease-out forwards;
}

.animate-reveal-right {
  animation: reveal-right 0.8s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.6s ease-out forwards;
}

.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }
.animation-delay-600 { animation-delay: 600ms; }

.grain-overlay::before {
  content: '';
  position: absolute;
  inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  animation: grain 8s steps(10) infinite;
}

.text-stroke {
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}

.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.clip-diagonal-reverse {
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

/* Fade in animation for images */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.7s ease-out forwards;
}

/* ─────────────────────────────────────────────────────────────
   0pt additions: brand red (single accent) + provenance status
   colors + scroll-reveal API (IntersectionObserver via useReveal)
   ───────────────────────────────────────────────────────────── */
:root {
  --accent-red: #E40014;        /* the single accent — one CTA / key number per screen */
  --prov-0: #737373;            /* ej tillgänglig / licens krävs */
  --prov-1: #143AFF;            /* en källa */
  --prov-2: #FCBB00;            /* delvis bekräftad */
  --prov-3: #00D294;            /* flera källor överens */
}

@theme inline {
  --color-accent-red: var(--accent-red);
  --color-prov-0: var(--prov-0);
  --color-prov-1: var(--prov-1);
  --color-prov-2: var(--prov-2);
  --color-prov-3: var(--prov-3);
}

/* scroll-reveal contract: add class "reveal" (+ optional -left/-right/-scale/-fade
   and "delay-N") to children of an element wired with useReveal(). */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade { opacity: 0; }
.reveal.in-view { animation: reveal-up 0.8s ease-out forwards; }
.reveal-left.in-view { animation: reveal-left 0.8s ease-out forwards; }
.reveal-right.in-view { animation: reveal-right 0.8s ease-out forwards; }
.reveal-scale.in-view { animation: scale-in 0.6s ease-out forwards; }
.reveal-fade.in-view { animation: fadeIn 0.7s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade {
    opacity: 1;
    animation: none;
  }
  .animate-float,
  .grain-overlay::before { animation: none; }
}