@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

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

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

@theme {
  --breakpoint-sm: 480px;

  --font-display: "Plus Jakarta Sans", Poppins, Inter, system-ui, sans-serif;
  --font-body: Satoshi, Outfit, Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  --text-2xs: 0.625rem;
  --text-2xs--line-height: 1.4;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.4;
  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.5;
  --text-base: 0.875rem;
  --text-base--line-height: 1.6;
  --text-md: 1rem;
  --text-md--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.5;
  --text-xl: 1.375rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.3;
  --text-3xl: 2.25rem;
  --text-3xl--line-height: 1.2;

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-surface: hsl(var(--surface));
  --color-foreground-muted: hsl(var(--foreground-muted));
  --color-foreground-subtle: hsl(var(--foreground-subtle));

  --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-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-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-accent-muted: hsl(var(--accent-muted));
  --color-accent-subtle: hsl(var(--accent-subtle));
  --color-link-highlight: var(--link-highlight);

  --color-warm-dark: hsl(var(--warm-dark));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --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));

  --color-success: hsl(var(--success));
  --color-success-bg: hsl(var(--success-bg) / 0.1);
  --color-success-border: hsl(var(--success-border) / 0.3);
  --color-warning: hsl(var(--warning));
  --color-warning-bg: hsl(var(--warning-bg) / 0.1);
  --color-warning-border: hsl(var(--warning-border) / 0.3);
  --color-error: hsl(var(--error));
  --color-error-bg: hsl(var(--error-bg) / 0.1);
  --color-error-border: hsl(var(--error-border) / 0.3);
  --color-info: hsl(var(--info));
  --color-info-bg: hsl(var(--info-bg) / 0.1);
  --color-info-border: hsl(var(--info-border) / 0.3);

  --color-category-teal: hsl(var(--category-teal));
  --color-category-amber: hsl(var(--category-amber));
  --color-category-emerald: hsl(var(--category-emerald));
  --color-category-orange: hsl(var(--category-orange));
  --color-category-violet: hsl(var(--category-violet));
  --color-category-rose: hsl(var(--category-rose));
  --color-category-blue: hsl(var(--category-blue));
  --color-category-red: hsl(var(--category-red));
  --color-category-gold: hsl(var(--category-gold));

  --color-status-draft: hsl(var(--status-draft));
  --color-status-testing: hsl(var(--status-testing));
  --color-status-production: hsl(var(--status-production));
  --color-status-archived: hsl(var(--status-archived));

  --spacing-header: var(--header-height);
  --spacing-sidebar-w: var(--sidebar-width);
  --spacing-sidebar-collapsed: var(--sidebar-collapsed);
  --spacing-right-panel: var(--right-panel);

  --radius-xl:  calc(var(--radius) * 1.33);
  --radius-lg:  var(--radius);
  --radius-md:  calc(var(--radius) - 4px);
  --radius-sm:  calc(var(--radius) - 8px);
  --radius-2xl: calc(var(--radius) * 1.67);
  --radius-3xl: calc(var(--radius) * 2);
  --radius-4xl: calc(var(--radius) * 2.67);

  --z-index-dropdown: 50;
  --z-index-sticky: 100;
  --z-index-overlay: 200;
  --z-index-modal: 300;
  --z-index-toast: 400;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-ai-pulse: ai-pulse 1.4s ease-in-out infinite;
  --animate-ai-cursor: ai-cursor 1s step-end infinite;
  --animate-slide-in-right: slide-in-right 0.3s ease-out;
  --animate-bulk-bar-in: bulk-bar-in 0.3s ease-out;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;

  @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; }
  }
  @keyframes ai-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  @keyframes ai-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  @keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  @keyframes bulk-bar-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes caret-blink {
    0%, 70%, 100% { opacity: 1; }
    20%, 50% { opacity: 0; }
  }
}

/* Design System — All colors in HSL */

@layer base {
  /* Warm theme (DEFAULT) — applies via :root, with .warm as backwards-compat alias */
  :root,
  .warm {
    --background: 30 18% 91%;
    --foreground: 12 6% 15%;

    --card: 30 25% 97%;
    --card-foreground: 12 6% 15%;

    --popover: 30 25% 97%;
    --popover-foreground: 12 6% 15%;

    --primary: 15 10% 22%;
    --primary-foreground: 30 25% 97%;

    --secondary: 28 14% 87%;
    --secondary-foreground: 12 6% 15%;

    --muted: 25 12% 88%;
    --muted-foreground: 20 6% 41%;

    --accent: 18 60% 45%;
    --accent-foreground: 30 25% 97%;

    --destructive: 8 60% 48%;
    --destructive-foreground: 30 25% 97%;

    --border: 28 14% 81%;
    --input: 28 14% 81%;
    --ring: 18 60% 45%;

    --surface: 40 15% 94%;
    --foreground-muted: 20 6% 41%;
    --foreground-subtle: 20 3% 55%;

    /* Accent variants */
    --accent-muted: 18 38% 55%;
    --accent-subtle: 30 15% 92%;
    --warm-dark: 20 14% 30%;
    --link-highlight: hsl(18 60% 45% / 0.08);

    /* Semantic feedback — theme-adaptive */
    --success: 152 45% 38%;
    --success-bg: 152 45% 38%;
    --success-border: 152 45% 38%;
    --warning: 38 70% 45%;
    --warning-bg: 38 70% 45%;
    --warning-border: 38 70% 45%;
    --error: 8 60% 48%;
    --error-bg: 8 60% 48%;
    --error-border: 8 60% 48%;
    --info: 215 45% 48%;
    --info-bg: 215 45% 48%;
    --info-border: 215 45% 48%;

    --sidebar-background: 40 15% 94%;
    --sidebar-foreground: 12 6% 15%;
    --sidebar-primary: 18 60% 45%;
    --sidebar-primary-foreground: 30 25% 97%;
    --sidebar-accent: 28 14% 87%;
    --sidebar-accent-foreground: 12 6% 15%;
    --sidebar-border: 28 14% 81%;
    --sidebar-ring: 18 60% 45%;

    --radius: 0.75rem;

    /* Categorical palette — 9 distinct hues for content tagging */
    --category-teal: 185 55% 42%;
    --category-amber: 38 80% 50%;
    --category-emerald: 152 55% 40%;
    --category-orange: 25 85% 52%;
    --category-violet: 262 55% 55%;
    --category-rose: 340 65% 55%;
    --category-blue: 230 60% 58%;
    --category-red: 0 70% 55%;
    --category-gold: 48 85% 48%;

    /* Status colors */
    --status-draft: 45 93% 47%;
    --status-testing: 217 91% 60%;
    --status-production: 142 71% 45%;
    --status-archived: 0 0% 45%;

    /* Layout */
    --header-height: 3.5rem;
    --sidebar-width: 15rem;
    --sidebar-collapsed: 4rem;
    --right-panel: 22rem;

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* Motion */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-medium: 200ms;
    --duration-slow: 300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* AI state tokens */
    --ai-pulse-duration: 1.5s;
    --ai-thinking-dot-size: 6px;
    --ai-thinking-gap: 4px;
    --ai-thinking-duration: 1.4s;
    --ai-cursor-width: 2px;
    --ai-cursor-blink: 1s;

    /* Browser chrome */
    color-scheme: light;
    /* Scrollbar */
    --scrollbar-thumb: hsl(28 14% 76%);
    --scrollbar-track: transparent;
    --scrollbar-width: thin;
  }

  /* Dark theme */
  .dark {
    --background: 20 14% 4%;
    --foreground: 60 9% 98%;

    --card: 12 6% 15%;
    --card-foreground: 60 9% 98%;

    --popover: 12 6% 15%;
    --popover-foreground: 60 9% 98%;

    --primary: 20 6% 90%;
    --primary-foreground: 20 14% 4%;

    --secondary: 20 8% 17%;
    --secondary-foreground: 60 9% 98%;

    --muted: 24 10% 12%;
    --muted-foreground: 24 5% 64%;

    --accent: 18 65% 55%;
    --accent-foreground: 60 9% 98%;

    --destructive: 6 65% 60%;
    --destructive-foreground: 60 9% 98%;

    --border: 25 8% 25%;
    --input: 20 8% 17%;
    --ring: 18 65% 55%;

    --radius: 0.75rem;

    /* Custom surface tokens */
    --surface: 20 8% 8%;
    --foreground-muted: 24 5% 64%;
    --foreground-subtle: 24 5% 45%;

    /* Accent variants */
    --accent-muted: 18 40% 30%;
    --accent-subtle: 20 15% 10%;
    --warm-dark: 20 8% 72%;
    --link-highlight: hsl(18 65% 55% / 0.12);

    /* Semantic feedback */
    --success: 148 45% 50%;
    --success-bg: 148 45% 50%;
    --success-border: 148 45% 50%;
    --warning: 40 75% 55%;
    --warning-bg: 40 75% 55%;
    --warning-border: 40 75% 55%;
    --error: 6 65% 60%;
    --error-bg: 6 65% 60%;
    --error-border: 6 65% 60%;
    --info: 215 50% 62%;
    --info-bg: 215 50% 62%;
    --info-border: 215 50% 62%;

    /* Categorical palette — 9 distinct hues for content tagging */
    --category-teal: 185 55% 42%;
    --category-amber: 38 80% 50%;
    --category-emerald: 152 55% 40%;
    --category-orange: 25 85% 52%;
    --category-violet: 262 55% 55%;
    --category-rose: 340 65% 55%;
    --category-blue: 230 60% 58%;
    --category-red: 0 70% 55%;
    --category-gold: 48 85% 48%;

    /* Status colors */
    --status-draft: 45 93% 47%;
    --status-testing: 217 91% 60%;
    --status-production: 142 71% 45%;
    --status-archived: 0 0% 45%;

    /* Layout */
    --header-height: 3.5rem;
    --sidebar-width: 15rem;
    --sidebar-collapsed: 4rem;
    --right-panel: 22rem;

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* Motion */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 150ms;
    --duration-medium: 200ms;
    --duration-slow: 300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* AI state tokens */
    --ai-pulse-duration: 1.5s;
    --ai-thinking-dot-size: 6px;
    --ai-thinking-gap: 4px;
    --ai-thinking-duration: 1.4s;
    --ai-cursor-width: 2px;
    --ai-cursor-blink: 1s;

    /* Sidebar */
    --sidebar-background: 24 10% 10%;
    --sidebar-foreground: 60 9% 98%;
    --sidebar-primary: 18 65% 55%;
    --sidebar-primary-foreground: 60 9% 98%;
    --sidebar-accent: 24 10% 14%;
    --sidebar-accent-foreground: 60 9% 98%;
    --sidebar-border: 30 6% 25%;
    --sidebar-ring: 18 65% 55%;

    /* Browser chrome */
    color-scheme: dark;
    /* Scrollbar */
    --scrollbar-thumb: hsl(25 8% 30%);
    --scrollbar-track: transparent;
    --scrollbar-width: thin;
  }

  /* Light theme */
  .light {
    --background: 30 6% 93%;
    --foreground: 24 10% 10%;

    --card: 0 0% 100%;
    --card-foreground: 24 10% 10%;

    --popover: 40 8% 99%;
    --popover-foreground: 24 10% 10%;

    --primary: 24 10% 10%;
    --primary-foreground: 40 6% 98%;

    --secondary: 30 8% 93%;
    --secondary-foreground: 24 10% 10%;

    --muted: 25 6% 91%;
    --muted-foreground: 20 6% 41%;

    --accent: 18 65% 41%;
    --accent-foreground: 40 6% 99%;

    --destructive: 6 70% 52%;
    --destructive-foreground: 40 6% 99%;

    --border: 25 8% 89%;
    --input: 25 8% 89%;
    --ring: 18 65% 41%;

    --surface: 40 8% 97%;
    --foreground-muted: 20 6% 41%;
    --foreground-subtle: 20 3% 55%;

    /* Accent variants */
    --accent-muted: 18 35% 51%;
    --accent-subtle: 30 12% 94%;
    --warm-dark: 20 12% 36%;
    --link-highlight: hsl(18 65% 41% / 0.08);

    /* Semantic feedback — theme-adaptive */
    --success: 148 50% 42%;
    --success-bg: 148 50% 42%;
    --success-border: 148 50% 42%;
    --warning: 40 80% 48%;
    --warning-bg: 40 80% 48%;
    --warning-border: 40 80% 48%;
    --error: 6 70% 52%;
    --error-bg: 6 70% 52%;
    --error-border: 6 70% 52%;
    --info: 215 55% 52%;
    --info-bg: 215 55% 52%;
    --info-border: 215 55% 52%;

    --sidebar-background: 40 6% 97%;
    --sidebar-foreground: 24 10% 10%;
    --sidebar-primary: 18 65% 41%;
    --sidebar-primary-foreground: 40 6% 99%;
    --sidebar-accent: 30 8% 93%;
    --sidebar-accent-foreground: 24 10% 10%;
    --sidebar-border: 25 8% 89%;
    --sidebar-ring: 18 65% 41%;

    /* Browser chrome */
    color-scheme: light;
    /* Scrollbar */
    --scrollbar-thumb: hsl(25 8% 82%);
    --scrollbar-track: transparent;
    --scrollbar-width: thin;
  }

}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  * {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: var(--scrollbar-width);
  }
}

/* Logo fill — dark: foreground (white), light/warm: foreground (dark) */
.logo-fill { fill: hsl(var(--foreground)); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}