@import "tailwindcss";
@import "tw-animate-css";

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

@theme inline {
  --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-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-brand: var(--brand);
  --color-brand-soft: var(--brand-soft);
  --color-brand-deep: var(--brand-deep);
  --color-sand: var(--sand);
  --color-ink: var(--ink);

  /* === PREMIUM EXTENSION: complementary accents & materials === */
  --color-gold: var(--gold);
  --color-gold-soft: var(--gold-soft);
  --color-gold-deep: var(--gold-deep);
  --color-iris: var(--iris);
  --color-iris-soft: var(--iris-soft);
  --color-iris-deep: var(--iris-deep);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-info: var(--info);
  --color-info-soft: var(--info-soft);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-surface-sunken: var(--surface-sunken);

  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-display), ui-serif, Georgia, serif;
  --font-mono: var(--font-mono), ui-monospace, monospace;

  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 12px);
}

:root {
  /* Light: cool paper with blue accents */
  --radius: 0.625rem;
  --background: oklch(0.985 0.004 240);
  --foreground: oklch(0.16 0.02 255);
  --card: oklch(1 0.003 240);
  --card-foreground: oklch(0.16 0.02 255);
  --popover: oklch(1 0.003 240);
  --popover-foreground: oklch(0.16 0.02 255);
  --primary: oklch(0.20 0.025 255);
  --primary-foreground: oklch(0.985 0.004 240);
  --secondary: oklch(0.95 0.01 240);
  --secondary-foreground: oklch(0.20 0.025 255);
  --muted: oklch(0.95 0.01 240);
  --muted-foreground: oklch(0.46 0.018 255);
  --accent: oklch(0.93 0.03 240);
  --accent-foreground: oklch(0.20 0.025 255);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.90 0.012 240);
  --input: oklch(0.90 0.012 240);
  --ring: oklch(0.62 0.20 250);

  /* StratOps brand: hexagonal crystal blue */
  --brand: oklch(0.58 0.21 252);
  --brand-soft: oklch(0.74 0.16 240);
  --brand-deep: oklch(0.42 0.20 258);
  --sand: oklch(0.93 0.015 240);
  --ink: oklch(0.18 0.025 255);

  --chart-1: oklch(0.58 0.21 252);
  --chart-2: oklch(0.70 0.16 200);
  --chart-3: oklch(0.45 0.18 270);
  --chart-4: oklch(0.74 0.16 240);
  --chart-5: oklch(0.35 0.04 255);

  /* === PREMIUM EXTENSION — light theme ===
     Complementary accents that elevate the StratOps blue to
     Apple-keynote materiality without competing with it. */

  /* Warm secondary accent — champagne gold (hue 70 ≈ complement of brand 252).
     For stat values, premium emphasis, italicized headings. */
  --gold: oklch(0.78 0.07 70);
  --gold-soft: oklch(0.92 0.035 70);
  --gold-deep: oklch(0.55 0.10 65);

  /* Cool secondary accent — iris/violet (hue 285, slightly off-axis from brand).
     For depth, secondary CTAs, Linear.app-style emphasis. */
  --iris: oklch(0.52 0.18 285);
  --iris-soft: oklch(0.78 0.06 290);
  --iris-deep: oklch(0.35 0.15 285);

  /* Semantic accents — for compliance section's three statuses (Verified /
     Active / Registered), form success states, and informational chips. */
  --success: oklch(0.62 0.15 145);
  --success-soft: oklch(0.92 0.04 145);
  --warning: oklch(0.75 0.14 70);
  --warning-soft: oklch(0.94 0.035 70);
  --info: oklch(0.62 0.13 230); /* deliberately off-brand hue so it doesn't compete */
  --info-soft: oklch(0.93 0.03 230);

  /* Tiered surface depth — Apple's 4-step elevation ladder.
     Currently only background + card exist; this adds elevated + sunken. */
  --surface-1: oklch(1 0.003 240);          /* base card (matches --card) */
  --surface-2: oklch(1 0.002 250);          /* elevated card (cooler, brighter) */
  --surface-3: oklch(1 0.001 250);          /* overlay / popover / modal */
  --surface-sunken: oklch(0.97 0.006 250); /* inset wells, code blocks, inputs */

  /* Frosted glass material — tinted, not flat. Apple's glass has a hue. */
  --glass-base: oklch(0.99 0.005 250 / 0.72);
  --glass-warm: oklch(0.99 0.012 70 / 0.72);
  --glass-brand: oklch(0.97 0.025 252 / 0.72);

  /* Gradient stop tokens — replace hardcoded oklch values in hero overlay,
     why-stratops & testimonial backdrops. */
  --glow-brand: oklch(0.55 0.20 252 / 0.35);
  --glow-iris: oklch(0.50 0.18 285 / 0.20);
  --glow-warm: oklch(0.55 0.10 70 / 0.18);

  /* Hairline dividers — tiered for hierarchy. */
  --hairline: oklch(0.90 0.012 240);
  --hairline-tint: oklch(0.88 0.025 252);
  --hairline-warm: oklch(0.90 0.018 70);

  /* Depth shadow tokens — replace hardcoded shadow-[0_20px_60px_-30px_var(--brand)]. */
  --shadow-xs: 0 1px 2px oklch(0.20 0.04 258 / 0.04);
  --shadow-sm: 0 2px 8px -2px oklch(0.20 0.04 258 / 0.06), 0 1px 2px oklch(0.20 0.04 258 / 0.04);
  --shadow-md: 0 8px 24px -8px oklch(0.20 0.04 258 / 0.10), 0 2px 6px -2px oklch(0.20 0.04 258 / 0.05);
  --shadow-lg: 0 20px 60px -20px oklch(0.20 0.04 258 / 0.16);
  --shadow-brand: 0 12px 40px -12px oklch(0.58 0.21 252 / 0.40);
  --shadow-gold: 0 12px 40px -12px oklch(0.78 0.07 70 / 0.30);
  /* === END PREMIUM EXTENSION — light === */

  --sidebar: oklch(0.985 0.004 240);
  --sidebar-foreground: oklch(0.16 0.02 255);
  --sidebar-primary: oklch(0.20 0.025 255);
  --sidebar-primary-foreground: oklch(0.985 0.004 240);
  --sidebar-accent: oklch(0.95 0.01 240);
  --sidebar-accent-foreground: oklch(0.20 0.025 255);
  --sidebar-border: oklch(0.90 0.012 240);
  --sidebar-ring: oklch(0.62 0.20 250);
}

.dark {
  /* Dark: deep navy with crystal-blue glow — matches StratOps brand */
  --background: oklch(0.12 0.025 258);
  --foreground: oklch(0.97 0.008 240);
  --card: oklch(0.17 0.03 258);
  --card-foreground: oklch(0.97 0.008 240);
  --popover: oklch(0.15 0.03 258);
  --popover-foreground: oklch(0.97 0.008 240);
  --primary: oklch(0.97 0.008 240);
  --primary-foreground: oklch(0.17 0.03 258);
  --secondary: oklch(0.23 0.035 258);
  --secondary-foreground: oklch(0.97 0.008 240);
  --muted: oklch(0.21 0.03 258);
  --muted-foreground: oklch(0.68 0.02 245);
  --accent: oklch(0.30 0.06 250);
  --accent-foreground: oklch(0.95 0.02 240);
  --destructive: oklch(0.70 0.19 22);
  --border: oklch(0.65 0.08 250 / 18%);
  --input: oklch(0.65 0.08 250 / 22%);
  --ring: oklch(0.62 0.20 252);

  --brand: oklch(0.65 0.21 252);
  --brand-soft: oklch(0.78 0.15 240);
  --brand-deep: oklch(0.45 0.20 258);
  --sand: oklch(0.30 0.05 255);
  --ink: oklch(0.10 0.025 260);

  --chart-1: oklch(0.65 0.21 252);
  --chart-2: oklch(0.70 0.16 200);
  --chart-3: oklch(0.55 0.16 270);
  --chart-4: oklch(0.78 0.15 240);
  --chart-5: oklch(0.40 0.06 255);

  /* === PREMIUM EXTENSION — dark theme ===
     Mirrors the light-theme tokens with adjusted lightness/chroma for the
     deep-navy base. Apple's dark mode bumps L on accents by ~0.05-0.08. */

  /* Warm secondary accent — champagne gold. Slightly brighter on dark so it
     still reads as "premium" against the navy. */
  --gold: oklch(0.82 0.08 70);
  --gold-soft: oklch(0.70 0.06 70);
  --gold-deep: oklch(0.62 0.10 65);

  /* Cool secondary accent — iris/violet. Lifted in L for dark backgrounds. */
  --iris: oklch(0.65 0.18 285);
  --iris-soft: oklch(0.55 0.12 290);
  --iris-deep: oklch(0.45 0.16 285);

  /* Semantic accents — lightness tuned for dark UI legibility. */
  --success: oklch(0.70 0.16 150);
  --success-soft: oklch(0.28 0.06 150);
  --warning: oklch(0.80 0.14 75);
  --warning-soft: oklch(0.30 0.07 75);
  --info: oklch(0.68 0.13 235);
  --info-soft: oklch(0.28 0.07 235);

  /* Tiered surface depth — Apple dark mode goes BRIGHTER with elevation,
     not darker. Currently --popover (0.15) sits BETWEEN --background (0.12)
     and --card (0.17) which inverts the correct hierarchy. */
  --surface-1: oklch(0.17 0.03 258);          /* base card (matches --card) */
  --surface-2: oklch(0.21 0.035 258);         /* elevated card */
  --surface-3: oklch(0.24 0.04 258);          /* overlay / popover / modal */
  --surface-sunken: oklch(0.10 0.025 258);    /* inset wells, code blocks */

  /* Frosted glass — warmer on dark so the blur reads as "lit", not as void. */
  --glass-base: oklch(0.18 0.035 258 / 0.65);
  --glass-warm: oklch(0.20 0.05 70 / 0.65);
  --glass-brand: oklch(0.19 0.07 252 / 0.65);

  /* Gradient stop tokens — brighter glows on dark. */
  --glow-brand: oklch(0.65 0.20 252 / 0.40);
  --glow-iris: oklch(0.60 0.18 285 / 0.22);
  --glow-warm: oklch(0.65 0.10 70 / 0.18);

  /* Hairline dividers — current --border already uses 18% alpha; tier up. */
  --hairline: oklch(0.65 0.08 250 / 18%);
  --hairline-tint: oklch(0.65 0.12 252 / 28%);
  --hairline-warm: oklch(0.65 0.08 70 / 22%);

  /* Depth shadows — heavier & darker on dark mode (Apple goes to pure black
     at the deepest level, with slight brand tint on hero CTAs). */
  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.24);
  --shadow-sm: 0 2px 8px -2px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.20);
  --shadow-md: 0 8px 24px -8px oklch(0 0 0 / 0.40), 0 2px 6px -2px oklch(0 0 0 / 0.25);
  --shadow-lg: 0 20px 60px -20px oklch(0 0 0 / 0.50);
  --shadow-brand: 0 12px 40px -12px oklch(0.65 0.21 252 / 0.45);
  --shadow-gold: 0 12px 40px -12px oklch(0.82 0.08 70 / 0.30);
  /* === END PREMIUM EXTENSION — dark === */

  --sidebar: oklch(0.15 0.03 258);
  --sidebar-foreground: oklch(0.97 0.008 240);
  --sidebar-primary: oklch(0.65 0.21 252);
  --sidebar-primary-foreground: oklch(0.12 0.025 258);
  --sidebar-accent: oklch(0.23 0.035 258);
  --sidebar-accent-foreground: oklch(0.97 0.008 240);
  --sidebar-border: oklch(0.65 0.08 250 / 18%);
  --sidebar-ring: oklch(0.62 0.20 252);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
  }
  body {
    @apply bg-background text-foreground;
    position: relative;
    font-feature-settings: "ss01", "cv11";
  }
  ::selection {
    background: var(--brand);
    color: var(--background);
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display), ui-serif, Georgia, serif;
  }
  .font-mono-num {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-feature-settings: "tnum", "ss01";
  }
  .text-brand {
    color: var(--brand);
  }
  .bg-brand {
    background-color: var(--brand);
  }
  .border-brand {
    border-color: var(--brand);
  }
  .text-gradient-brand {
    /* Fallback: solid brand color (always visible) */
    color: var(--brand);
    /* Gradient text: only applied if background-clip:text is supported */
    background: linear-gradient(
      100deg,
      var(--brand-soft) 0%,
      var(--brand) 45%,
      oklch(0.85 0.18 220) 70%,
      var(--brand-soft) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* If background-clip:text is NOT supported, keep the solid color */
  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient-brand {
      -webkit-text-fill-color: var(--brand);
      color: var(--brand);
    }
  }
  .text-gradient-light {
    /* Fallback: light foreground (always visible) */
    color: oklch(0.92 0.01 240);
    background: linear-gradient(
      180deg,
      oklch(0.99 0.01 240) 0%,
      oklch(0.82 0.04 235) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient-light {
      -webkit-text-fill-color: oklch(0.92 0.01 240);
      color: oklch(0.92 0.01 240);
    }
  }
  .hairline {
    background: linear-gradient(
      90deg,
      transparent 0%,
      oklch(0.65 0.10 250 / 0.4) 50%,
      transparent 100%
    );
    height: 1px;
  }
  .glass-panel {
    background: color-mix(in oklch, var(--card) 60%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
  .glass-solid {
    background: color-mix(in oklch, var(--background) 92%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
  /* === PREMIUM EXTENSION: tinted glass materials ===
     Apple's glass is never neutral — it carries a subtle hue that signals
     context. Use these instead of raw blur for hero overlays, sticky
     nav, and feature cards that need depth. */
  .glass-base {
    background: var(--glass-base);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
  .glass-warm {
    background: var(--glass-warm);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
  .glass-brand {
    background: var(--glass-brand);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  /* === PREMIUM EXTENSION: warm & iris text gradients ===
     Extends the existing text-gradient-brand / text-gradient-light system
     with two new premium treatments for headline emphasis. */
  .text-gradient-warm {
    color: var(--gold);
    background: linear-gradient(
      100deg,
      var(--gold-soft) 0%,
      var(--gold) 45%,
      oklch(0.88 0.05 220) 70%,
      var(--gold-soft) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient-warm {
      -webkit-text-fill-color: var(--gold);
      color: var(--gold);
    }
  }
  .text-gradient-iris {
    color: var(--iris);
    background: linear-gradient(
      100deg,
      var(--iris-soft) 0%,
      var(--iris) 50%,
      var(--iris-deep) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient-iris {
      -webkit-text-fill-color: var(--iris);
      color: var(--iris);
    }
  }
  /* === PREMIUM EXTENSION: tiered hairline dividers ===
     Use .hairline-tint for brand-emphasized separators (e.g. between hero
     and stats), .hairline-warm for premium-tier section breaks. */
  .hairline-tint {
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--hairline-tint) 50%,
      transparent 100%
    );
    height: 1px;
  }
  .hairline-warm {
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--hairline-warm) 50%,
      transparent 100%
    );
    height: 1px;
  }
  /* === PREMIUM EXTENSION: depth shadow utilities ===
     Drop-in replacements for the hardcoded shadow-[0_20px_60px_-30px_var(--brand)]
     pattern currently used in 5+ components. */
  .shadow-card {
    box-shadow: var(--shadow-md);
  }
  .shadow-elevated {
    box-shadow: var(--shadow-lg);
  }
  .shadow-brand-glow {
    box-shadow: var(--shadow-brand);
  }
  .shadow-gold-glow {
    box-shadow: var(--shadow-gold);
  }
  .grain-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }
  .mask-fade-b {
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--brand) 35%, var(--muted));
  border-radius: 8px;
  border: 2px solid var(--background);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 40s linear infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.9;
  }
}
.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
}
.animate-float-slow {
  animation: float-slow 12s ease-in-out infinite;
}

@keyframes scroll-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}
.animate-scroll-cue {
  animation: scroll-cue 2s ease-in-out infinite;
}