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

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

/* -----------------------------------------------------------------------
 * ZunoChat design tokens
 * -----------------------------------------------------------------------
 * Palette derives directly from the brand lockup:
 *   - Wordmark navy  #1B2230  → --foreground / strong text
 *   - Magenta hero   #E6299B  → --primary (call-to-action, selected state)
 *   - Cyan accent    #22C1EE  → --accent / --ring (focus, info chips)
 *   - Warm orange    #FF8C3A  → --chart highlight, subtle notifications
 *   - Off-white      #FAFAFC  → --background (keeps the logo feeling native)
 *
 * Per Design Guidelines: 3 neutrals (bg, foreground, muted) + primary +
 * accent + destructive = 5 functional colors total. No purple-dominant
 * treatments, no gradients on primary surfaces — the Three.js backdrop
 * carries the rainbow arc so interactive UI can stay crisp + accessible.
 * ----------------------------------------------------------------------- */
:root {
  /* Neutrals — paper-white canvas, deep navy ink, and a soft grey scale
   * for borders + muted text. Card/popover mirror the background so
   * translucent surfaces layered over the Three.js backdrop read
   * cleanly. */
  --background: oklch(0.99 0.005 280);
  --foreground: oklch(0.22 0.035 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.035 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.035 260);

  /* Brand magenta — the hottest, most memorable hue in the logo arc.
   * Used for primary CTAs, active/selected chips, and toggle "on" state.
   * Foreground is pure white for AA contrast at all weights. */
  --primary: oklch(0.66 0.26 352);
  --primary-foreground: oklch(0.99 0.005 280);

  /* Secondary surfaces — barely-tinted neutral that reads as quiet gray
   * over the ambient background, with navy text on top. */
  --secondary: oklch(0.96 0.01 280);
  --secondary-foreground: oklch(0.22 0.035 260);
  --muted: oklch(0.96 0.01 280);
  --muted-foreground: oklch(0.5 0.02 260);

  /* Accent cyan — the cool end of the logo arc. Reserved for focus
   * rings, link states, and info/badge chrome so it doesn't fight the
   * magenta primary. */
  --accent: oklch(0.86 0.12 220);
  --accent-foreground: oklch(0.22 0.035 260);

  --destructive: oklch(0.62 0.24 25);
  --destructive-foreground: oklch(0.99 0.005 280);

  --border: oklch(0.9 0.015 270);
  --input: oklch(0.9 0.015 270);
  --ring: oklch(0.7 0.16 220); /* cyan focus ring pairs with magenta CTA */

  /* Chart swatches pulled directly from the logo gradient so any data
   * viz (e.g. live-count sparkline) feels native to the brand. */
  --chart-1: oklch(0.66 0.26 352); /* magenta  */
  --chart-2: oklch(0.72 0.2 40);   /* orange   */
  --chart-3: oklch(0.85 0.17 95);  /* yellow   */
  --chart-4: oklch(0.74 0.15 220); /* cyan     */
  --chart-5: oklch(0.6 0.2 285);   /* indigo   */

  /* Slightly softer corner radius → matches the friendly, rounded
   * geometry of the chat-bubble mark. */
  --radius: 0.875rem;

  --sidebar: oklch(0.99 0.005 280);
  --sidebar-foreground: oklch(0.22 0.035 260);
  --sidebar-primary: oklch(0.66 0.26 352);
  --sidebar-primary-foreground: oklch(0.99 0.005 280);
  --sidebar-accent: oklch(0.96 0.01 280);
  --sidebar-accent-foreground: oklch(0.22 0.035 260);
  --sidebar-border: oklch(0.9 0.015 270);
  --sidebar-ring: oklch(0.7 0.16 220);

  /* Brand gradient — exposed as a custom prop so any surface can tap
   * into the signature rainbow arc (used by the shader button, brand
   * badges, etc.). */
  --brand-gradient: linear-gradient(
    135deg,
    #22c1ee 0%,
    #5b8def 22%,
    #e6299b 55%,
    #ff4e9e 70%,
    #ff8c3a 85%,
    #ffd23b 100%
  );
}

/* Dark variant — deep navy canvas so the ZunoChat gradient still pops
 * (same brand mapping, just inverted neutrals). */
.dark {
  --background: oklch(0.17 0.03 260);
  --foreground: oklch(0.97 0.01 280);
  --card: oklch(0.2 0.035 260);
  --card-foreground: oklch(0.97 0.01 280);
  --popover: oklch(0.2 0.035 260);
  --popover-foreground: oklch(0.97 0.01 280);
  --primary: oklch(0.72 0.25 352);
  --primary-foreground: oklch(0.15 0.02 260);
  --secondary: oklch(0.26 0.04 260);
  --secondary-foreground: oklch(0.97 0.01 280);
  --muted: oklch(0.26 0.04 260);
  --muted-foreground: oklch(0.72 0.02 260);
  --accent: oklch(0.42 0.12 220);
  --accent-foreground: oklch(0.97 0.01 280);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(0.97 0.01 280);
  --border: oklch(0.3 0.04 260);
  --input: oklch(0.3 0.04 260);
  --ring: oklch(0.78 0.16 220);
  --chart-1: oklch(0.72 0.25 352);
  --chart-2: oklch(0.76 0.2 40);
  --chart-3: oklch(0.85 0.17 95);
  --chart-4: oklch(0.78 0.15 220);
  --chart-5: oklch(0.66 0.2 285);
  --sidebar: oklch(0.2 0.035 260);
  --sidebar-foreground: oklch(0.97 0.01 280);
  --sidebar-primary: oklch(0.72 0.25 352);
  --sidebar-primary-foreground: oklch(0.15 0.02 260);
  --sidebar-accent: oklch(0.26 0.04 260);
  --sidebar-accent-foreground: oklch(0.97 0.01 280);
  --sidebar-border: oklch(0.3 0.04 260);
  --sidebar-ring: oklch(0.78 0.16 220);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --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);

  /* Expose the brand gradient as a Tailwind-consumable custom property
   * so components can use `style={{ backgroundImage: 'var(--brand-gradient)' }}`
   * or reach for it from within `@apply` / arbitrary-value utilities. */
  --brand-gradient: var(--brand-gradient);
}

@layer utilities {
  /* Text that paints the ZunoChat rainbow arc across the glyphs —
   * perfect for hero callouts ("ZunoChat", section headings) without
   * having to inline a gradient everywhere. */
  .text-brand-gradient {
    background-image: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* A solid-fill version for icons / bg chips. */
  .bg-brand-gradient {
    background-image: var(--brand-gradient);
  }
  /* Uses the gradient as a 2px ring around any element. */
  .ring-brand-gradient {
    position: relative;
    isolation: isolate;
  }
  .ring-brand-gradient::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--brand-gradient);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}