@import "tailwindcss";

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

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

/* ─── Brand palette ──────────────────────────────────────────────────────────
 * ObjectStack Account uses a violet → indigo brand gradient.
 *   - `--brand-from` : violet  (primary brand hue)
 *   - `--brand-to`   : indigo  (gradient terminus)
 * `--primary` is wired to `--brand-from` so every default button, focus ring,
 * link colour and active-state automatically picks up the brand identity.
 * The composite gradients (`--brand-gradient`, `--brand-gradient-subtle`) are
 * intended for hero surfaces, the login split-screen panel and the page-header
 * banner. Tweak the two HSL triplets to re-skin the whole portal.
 */
:root {
  --radius: 0.75rem;

  --brand-from: 262 83% 58%;
  --brand-to: 221 83% 53%;
  --brand-gradient: linear-gradient(135deg, hsl(var(--brand-from)), hsl(var(--brand-to)));
  --brand-gradient-subtle: linear-gradient(
    135deg,
    hsl(var(--brand-from) / 0.08),
    hsl(var(--brand-to) / 0.08)
  );

  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: var(--brand-from);
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 262 83% 96%;
  --accent-foreground: 262 60% 30%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: var(--brand-from);
  --chart-1: 262 83% 58%;
  --chart-2: 221 83% 53%;
  --chart-3: 173 58% 39%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --sidebar-background: 0 0% 98.5%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: var(--brand-from);
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 262 83% 96%;
  --sidebar-accent-foreground: 262 60% 30%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: var(--brand-from);
}

.dark {
  --background: 222 47% 6%;
  --foreground: 0 0% 98%;
  --card: 222 47% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 222 47% 8%;
  --popover-foreground: 0 0% 98%;
  --primary: 262 83% 68%;
  --primary-foreground: 222 47% 6%;
  --secondary: 222 32% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 222 32% 14%;
  --muted-foreground: 220 9% 64%;
  --accent: 262 50% 20%;
  --accent-foreground: 262 80% 90%;
  --destructive: 0 62.8% 50%;
  --destructive-foreground: 0 0% 98%;
  --border: 222 32% 16%;
  --input: 222 32% 16%;
  --ring: 262 83% 68%;
  --chart-1: 262 83% 68%;
  --chart-2: 221 83% 63%;
  --chart-3: 173 58% 49%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --sidebar-background: 222 47% 7%;
  --sidebar-foreground: 220 9% 80%;
  --sidebar-primary: 262 83% 68%;
  --sidebar-primary-foreground: 222 47% 6%;
  --sidebar-accent: 262 50% 18%;
  --sidebar-accent-foreground: 262 80% 90%;
  --sidebar-border: 222 32% 14%;
  --sidebar-ring: 262 83% 68%;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  }
}

@layer utilities {
  /* ─── Brand surface helpers ───────────────────────────────────────────────
   * Apply on any element that should sit on the brand gradient (login hero
   * panel, top-bar logo tile, primary CTA, etc.). The `-subtle` variant is a
   * 8%-opacity wash for page headers and empty-state cards.
   */
  .bg-brand-gradient {
    background-image: var(--brand-gradient);
  }
  .bg-brand-gradient-subtle {
    background-image: var(--brand-gradient-subtle);
  }
  .text-brand-gradient {
    background-image: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .ring-brand {
    --tw-ring-color: hsl(var(--brand-from) / 0.35);
  }

  /* Soft radial "spotlight" used on hero / empty-state surfaces. */
  .bg-brand-spotlight {
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -20%, hsl(var(--brand-from) / 0.18), transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 100%, hsl(var(--brand-to) / 0.18), transparent 60%);
  }

  /* Mesh/grid backdrop for the login split-screen brand column. */
  .bg-brand-mesh {
    background-color: hsl(var(--brand-from));
    background-image:
      radial-gradient(at 20% 20%, hsl(var(--brand-from)) 0%, transparent 50%),
      radial-gradient(at 80% 0%, hsl(var(--brand-to)) 0%, transparent 50%),
      radial-gradient(at 0% 80%, hsl(280 90% 60%) 0%, transparent 50%),
      radial-gradient(at 80% 80%, hsl(199 89% 48%) 0%, transparent 50%);
  }
}

/* ─── Page transition ────────────────────────────────────────────────────────
 * Tiny fade-up applied to route content; opt in by adding `.page-enter`
 * to a wrapper around <Outlet/>.
 */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: page-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
