@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@plugin "@tailwindcss/typography";

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

@theme inline {
  /* Typography (§5.2) */
  --font-sans: var(--font-sans);
  --font-display: var(--font-display);
  --font-heading: var(--font-display);
  --font-mono: var(--font-mono);

  /* Semantic color tokens (§5.1) */
  --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-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  /* Signal — monochrome micro-accent */
  --color-signal: var(--signal);
  --color-signal-foreground: var(--signal-foreground);
  /* Semantic accent tokens — mapped to primary monochrome */
  --color-ai: var(--ai-accent);
  --color-ai-strong: var(--ai-accent-strong);
  --color-ai-foreground: var(--ai-accent-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);
  --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);

  /* Reference Palette Design Tokens */
  --color-accent-blue: var(--accent-blue);
  --color-accent-cyan: var(--accent-cyan-bright);
  --color-accent-orange: var(--accent-orange);
  --color-accent-yellow: var(--accent-yellow);
  --color-neutral-charcoal: var(--neutral-charcoal);
  --color-neutral-warm-dark: var(--neutral-warm-dark);
  --color-neutral-cool-light: var(--neutral-cool-light);
  --color-neutral-warm-beige: var(--neutral-warm-beige);
  --color-neutral-light-gray: var(--neutral-light-gray);

  /* Radius (§5.4) — friendly, rounded; base 1rem */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.25);
  --radius-2xl: calc(var(--radius) * 1.5);
  --radius-3xl: calc(var(--radius) * 2);

  /* Soft, low-opacity float shadow for hero/floating pill (§5.4) */
  --shadow-float: 0 8px 40px -12px rgb(2 2 2 / 0.12);
  --shadow-float-lg: 0 20px 60px -16px rgb(2 2 2 / 0.18);
}

:root {
  --radius: 1rem;

  /* Reference Palette: #FEFEFE near-white ground, #020202 near-black brand ink */
  --background: #fefefe;
  --foreground: #020202;
  --card: #ffffff;
  --card-foreground: #020202;
  --popover: #ffffff;
  --popover-foreground: #020202;

  /* Brand / primary = near-black #020202 */
  --primary: #020202;
  --primary-foreground: #fefefe;

  --secondary: #f1f1ef; /* Cool Light Neutral */
  --secondary-foreground: #020202;

  --muted: #f1f1ef;
  --muted-foreground: #5a5957; /* readable charcoal neutral — AA on #fefefe */

  /* Neutral hover/active surface */
  --accent: #f1f1ef;
  --accent-foreground: #020202;

  /* Reference Accents */
  --accent-blue: #67b7e7;         /* Sky Blue */
  --accent-cyan-bright: #4fdaf1;   /* Bright Cyan */
  --accent-orange: #e26b0b;        /* Orange */
  --accent-yellow: #f79c09;        /* Warm Yellow */

  /* Text-Safe Accent Tokens (WCAG AA readability on light surfaces) */
  --accent-cyan-text: #0891b2;
  --accent-blue-text: #0284c7;
  --accent-orange-text: #c25400;

  --neutral-charcoal: #343332;     /* Charcoal */
  --neutral-warm-dark: #1f1c1a;    /* Very Dark Warm Neutral */
  --neutral-cool-light: #f1f1ef;   /* Cool Light Neutral */
  --neutral-warm-beige: #dbb190;   /* Warm Beige */
  --neutral-light-gray: #d6d6d6;   /* Light Gray */

  /* Functional states */
  --destructive: #dc2626;
  --destructive-foreground: #fefefe;
  --success: #16a34a;
  --success-foreground: #fefefe;
  --warning: #f79c09;
  --warning-foreground: #020202;

  /* Signal micro-accent */
  --signal: #4fdaf1;
  --signal-foreground: #020202;

  /* AI Accent tokens — Sky Blue & Bright Cyan */
  --ai-accent: #67b7e7;
  --ai-accent-strong: #4fdaf1;
  --ai-accent-foreground: #020202;

  /* Controlled reference gradients (Strict Left-to-Right Cool-to-Warm: #4FDAF1 -> #67B7E7 -> #F79C09 -> #E26B0B) */
  --gradient-brand: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 28%, #f79c09 68%, #e26b0b 100%);
  --gradient-text: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 28%, #f79c09 68%, #e26b0b 100%);
  --gradient-cool: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 100%);
  --gradient-warm: linear-gradient(90deg, #f79c09 0%, #e26b0b 100%);
  --gradient-ai: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 100%);
  --gradient-ai-glow: radial-gradient(circle, rgba(79, 218, 241, 0.12) 0%, rgba(226, 107, 11, 0.04) 50%, transparent 70%);

  --border: #e3e3df;
  --border-strong: #343332;
  --border-subtle: #ecece9;
  --input: #e3e3df;
  --ring: #4fdaf1;

  /* Background grid line — subtle neutral on near-white */
  --grid-line: rgba(2, 2, 2, 0.04);
  --beam-glow: 5px;

  /* Reference chart ramp */
  --chart-1: #4fdaf1; /* Bright Cyan */
  --chart-2: #67b7e7; /* Sky Blue */
  --chart-3: #e26b0b; /* Orange */
  --chart-4: #f79c09; /* Warm Yellow */
  --chart-5: #343332; /* Charcoal */

  --sidebar: #fefefe;
  --sidebar-foreground: #020202;
  --sidebar-primary: #020202;
  --sidebar-primary-foreground: #fefefe;
  --sidebar-accent: #f1f1ef;
  --sidebar-accent-foreground: #020202;
  --sidebar-border: #e3e3df;
  --sidebar-ring: #4fdaf1;

  --gradient-spectrum: linear-gradient(90deg, #4fdaf1, #67b7e7, #f79c09, #e26b0b);
}

.dark {
  /* Reference Palette: #020202 Black ground, #FEFEFE near-white ink */
  --background: #020202;
  --foreground: #fefefe;
  --card: #141312; /* level 1 surface — warm dark neutral derived from #1F1C1A */
  --card-foreground: #fefefe;
  --popover: #1a1918; /* level 2 — elevated */
  --popover-foreground: #fefefe;

  --primary: #fefefe; /* on dark surfaces, primary action is crisp white */
  --primary-foreground: #020202;

  --secondary: #1a1918;
  --secondary-foreground: #fefefe;

  --muted: #1a1918;
  --muted-foreground: #a3a29f;

  --accent: #1f1c1a;
  --accent-foreground: #fefefe;

  /* Reference Accents on dark surfaces */
  --accent-blue: #67b7e7;
  --accent-cyan-bright: #4fdaf1;
  --accent-orange: #e26b0b;
  --accent-yellow: #f79c09;

  /* Text-Safe Accent Tokens on dark surfaces */
  --accent-cyan-text: #4fdaf1;
  --accent-blue-text: #67b7e7;
  --accent-orange-text: #f79c09;

  --neutral-charcoal: #343332;
  --neutral-warm-dark: #1f1c1a;
  --neutral-cool-light: #f1f1ef;
  --neutral-warm-beige: #dbb190;
  --neutral-light-gray: #d6d6d6;

  --destructive: #ef4444;
  --destructive-foreground: #fefefe;
  --success: #22c55e;
  --success-foreground: #020202;
  --warning: #f79c09;
  --warning-foreground: #020202;

  --signal: #4fdaf1;
  --signal-foreground: #020202;

  --ai-accent: #4fdaf1;
  --ai-accent-strong: #67b7e7;
  --ai-accent-foreground: #020202;

  /* Controlled reference gradients (Strict Left-to-Right Cool-to-Warm: #4FDAF1 -> #67B7E7 -> #F79C09 -> #E26B0B) */
  --gradient-brand: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 28%, #f79c09 68%, #e26b0b 100%);
  --gradient-text: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 28%, #f79c09 68%, #e26b0b 100%);
  --gradient-cool: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 100%);
  --gradient-warm: linear-gradient(90deg, #f79c09 0%, #e26b0b 100%);
  --gradient-ai: linear-gradient(90deg, #4fdaf1 0%, #67b7e7 100%);
  --gradient-ai-glow: radial-gradient(circle, rgba(79, 218, 241, 0.16) 0%, rgba(226, 107, 11, 0.05) 50%, transparent 70%);

  --border: #2b2a28;
  --border-strong: #d6d6d6;
  --border-subtle: #1e1d1b;
  --input: #2b2a28;
  --ring: #4fdaf1;

  /* Background grid line — subtle on deep black */
  --grid-line: rgba(254, 254, 254, 0.05);

  --chart-1: #4fdaf1;
  --chart-2: #67b7e7;
  --chart-3: #e26b0b;
  --chart-4: #f79c09;
  --chart-5: #d6d6d6;

  --sidebar: #020202;
  --sidebar-foreground: #fefefe;
  --sidebar-primary: #fefefe;
  --sidebar-primary-foreground: #020202;
  --sidebar-accent: #1a1918;
  --sidebar-accent-foreground: #fefefe;
  --sidebar-border: #232220;
  --sidebar-ring: #4fdaf1;

  --gradient-spectrum: linear-gradient(90deg, #4fdaf1, #67b7e7, #f79c09, #e26b0b);
}

/* Mobile: quiet background grid on small phones */
@media (max-width: 640px) {
  :root {
    --grid-line: rgba(2, 2, 2, 0.024);
    --beam-glow: 2px;
  }
  .dark {
    --grid-line: rgba(254, 254, 254, 0.035);
  }
}

/* Marquee for the integrations strip (§5.6 #6). v4-idiomatic keyframe defn. */
@theme {
  --animate-marquee: marquee var(--marquee-duration, 32s) linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Site background: a light/current travelling top -> bottom along a vertical line */
@keyframes line-current {
  0% {
    transform: translateY(-30vh);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(130vh);
    opacity: 0;
  }
}

/* Site background: a grid box fades in, holds at ~5%, then fades out (§7) */
@keyframes box-cycle {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  14% {
    opacity: 0.03;
    transform: scale(1);
  }
  86% {
    opacity: 0.03;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* Hero entrance — CSS-driven so it replays on every page load/refresh (no JS
   flag), is LCP-safe (the heading animates POSITION only, never opacity, so it
   paints immediately) and is reduced-motion safe (falls back to the fully
   visible default). Stagger via inline animation-delay on each item. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-rise-lcp {
  from {
    transform: translateY(12px);
  }
  to {
    transform: translateY(0);
  }
}
.hero-reveal {
  animation: hero-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-reveal-lcp {
  animation: hero-rise-lcp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal,
  .hero-reveal-lcp {
    animation: none;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    @apply font-sans;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display;
  }
  p {
    @apply font-sans;
  }
  /* Clickable controls show a pointer cursor — Tailwind v4 Preflight no longer
     does this for <button>. Scoped to genuinely interactive elements only, so
     non-clickable content is unaffected (§39–§42). Disabled controls opt out. */
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  [role="switch"]:not([aria-disabled="true"]),
  label[for],
  summary,
  select:not(:disabled) {
    cursor: pointer;
  }
}

@utility bg-gradient-brand {
  background-image: var(--gradient-brand);
  color: #FFFFFF;
  & svg {
    color: #FFFFFF;
  }
}
@utility bg-gradient-cool {
  background-image: var(--gradient-cool);
}
@utility bg-gradient-warm {
  background-image: var(--gradient-warm);
}
@utility text-gradient-brand {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@utility text-gradient-cool {
  background-image: var(--gradient-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@utility text-gradient-warm {
  background-image: var(--gradient-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

@utility text-accent-cyan {
  color: var(--accent-cyan-text);
}
@utility text-accent-blue {
  color: var(--accent-blue-text);
}
@utility text-accent-orange {
  color: var(--accent-orange-text);
}

@utility badge-gradient-brand {
  border: 1px solid rgba(79, 218, 241, 0.4);
  background: linear-gradient(90deg, rgba(79, 218, 241, 0.12) 0%, rgba(247, 156, 9, 0.08) 50%, rgba(226, 107, 11, 0.12) 100%);
}

@utility card-gradient-highlight {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(90deg, rgba(79, 218, 241, 0.8), rgba(103, 183, 231, 0.6) 30%, rgba(247, 156, 9, 0.6) 70%, rgba(226, 107, 11, 0.8)) border-box;
}

@utility card-gradient-cool {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(79, 218, 241, 0.7), rgba(103, 183, 231, 0.4)) border-box;
}

@utility card-gradient-warm {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(247, 156, 9, 0.6), rgba(226, 107, 11, 0.7)) border-box;
}

@utility glow-brand {
  box-shadow: 0 4px 24px -2px rgba(79, 218, 241, 0.35), 0 2px 12px -2px rgba(226, 107, 11, 0.25);
}

@utility glow-cyan {
  box-shadow: 0 4px 20px -2px rgba(79, 218, 241, 0.4);
}

@utility glow-orange {
  box-shadow: 0 4px 20px -2px rgba(226, 107, 11, 0.4);
}