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

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);
  --font-display: var(--font-display);
  --font-heading: var(--font-display);
  --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);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);

  /* Editorial (ElevenLabs-derived) tokens — navy palette */
  --color-canvas-soft: var(--canvas-soft);
  --color-surface-strong: var(--surface-strong);
  --color-ink: var(--ink);
  --color-body: var(--body-text);
  --color-muted-soft: var(--muted-soft);
  --color-hairline: var(--hairline);
  --color-hairline-soft: var(--hairline-soft);
  --color-hairline-strong: var(--hairline-strong);
  --color-on-primary: var(--on-primary);
  --color-success: var(--success);
  --color-gradient-mint: var(--gradient-mint);
  --color-gradient-peach: var(--gradient-peach);
  --color-gradient-lavender: var(--gradient-lavender);
  --color-gradient-sky: var(--gradient-sky);
  --color-gradient-rose: var(--gradient-rose);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

/* ---------- Light navy (editorial off-white, navy ink) ---------- */
:root {
  --background: #f3f5fb;
  --foreground: #0f1b33;
  --card: #ffffff;
  --card-foreground: #0f1b33;
  --popover: #ffffff;
  --popover-foreground: #0f1b33;
  --primary: #1b2741;
  --primary-foreground: #ffffff;
  --secondary: #e9edf7;
  --secondary-foreground: #1b2741;
  --muted: #eef1f8;
  --muted-foreground: #5d6b86;
  --accent: #e9edf7;
  --accent-foreground: #1b2741;
  --destructive: #dc2626;
  --border: #dfe4f0;
  --input: #cbd3e4;
  --ring: #94a0bd;
  --chart-1: #1b2741;
  --chart-2: #3a4a6b;
  --chart-3: #5d6b86;
  --chart-4: #94a0bd;
  --chart-5: #c8d0e2;
  --radius: 0.75rem;

  /* Editorial tokens */
  --canvas-soft: #f9fafd;
  --surface-strong: #e9edf7;
  --ink: #0c1426;
  --body-text: #44516c;
  --muted-soft: #94a0bd;
  --hairline: #e3e7f1;
  --hairline-soft: #eef1f8;
  --hairline-strong: #cbd3e4;
  --on-primary: #ffffff;
  --success: #16a34a;

  /* Atmospheric pastel orbs (cool-leaning for navy) */
  --gradient-mint: #a7e5d3;
  --gradient-peach: #f4c5a8;
  --gradient-lavender: #c8b8e0;
  --gradient-sky: #a8c8e8;
  --gradient-rose: #e8b8c4;

  --sidebar: #ffffff;
  --sidebar-foreground: #0f1b33;
  --sidebar-primary: #1b2741;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #eef1f8;
  --sidebar-accent-foreground: #1b2741;
  --sidebar-border: #e3e7f1;
  --sidebar-ring: #94a0bd;
}

/* ---------- Dark navy (deep navy canvas, off-white ink) ---------- */
.dark {
  --background: #070b16;
  --foreground: #e8edf9;
  --card: #0e1626;
  --card-foreground: #e8edf9;
  --popover: #0e1626;
  --popover-foreground: #e8edf9;
  --primary: #e8edf9;
  --primary-foreground: #0c1426;
  --secondary: #18233a;
  --secondary-foreground: #e8edf9;
  --muted: #141d30;
  --muted-foreground: #93a0bb;
  --accent: #18233a;
  --accent-foreground: #e8edf9;
  --destructive: #f87171;
  --border: #1b2740;
  --input: #283450;
  --ring: #4a5876;
  --chart-1: #e8edf9;
  --chart-2: #c8d0e2;
  --chart-3: #93a0bb;
  --chart-4: #5d6b86;
  --chart-5: #2a3654;

  /* Editorial tokens */
  --canvas-soft: #0b1322;
  --surface-strong: #18233a;
  --ink: #f1f5ff;
  --body-text: #a6b2cb;
  --muted-soft: #6c7a96;
  --hairline: #1b2740;
  --hairline-soft: #141d30;
  --hairline-strong: #283450;
  --on-primary: #0c1426;
  --success: #4ade80;

  --gradient-mint: #5fae9b;
  --gradient-peach: #c08a6b;
  --gradient-lavender: #8a78ad;
  --gradient-sky: #5f86b8;
  --gradient-rose: #b07d8c;

  --sidebar: #0a111e;
  --sidebar-foreground: #e8edf9;
  --sidebar-primary: #e8edf9;
  --sidebar-primary-foreground: #0c1426;
  --sidebar-accent: #18233a;
  --sidebar-accent-foreground: #e8edf9;
  --sidebar-border: #1b2740;
  --sidebar-ring: #4a5876;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    /* Theme-aware scrollbars (light/dark navy tokens) */
    scrollbar-width: thin;
    scrollbar-color: color-mix(
        in srgb,
        var(--muted-soft) 48%,
        transparent
      )
      transparent;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: color-mix(
      in srgb,
      var(--muted-soft) 42%,
      transparent
    );
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(
      in srgb,
      var(--muted-soft) 64%,
      transparent
    );
  }

  body {
    @apply bg-background text-foreground;
    letter-spacing: 0.01em;
  }
  html {
    @apply font-sans;
  }
}

@layer components {
  /* Waldenburg Light substitute — EB Garamond at weight 300. The editorial
     display signature: serif, light, tightly tracked. Never bold. */
  .font-display {
    font-family: var(--font-display), "Times New Roman", serif;
    font-weight: 300;
    letter-spacing: -0.01em;
  }
  .display-mega {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  .display-xl {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .display-lg {
    font-size: 2.25rem;
    line-height: 1.17;
    letter-spacing: -0.01em;
  }
  .display-md {
    font-size: 2rem;
    line-height: 1.13;
    letter-spacing: -0.01em;
  }
  .display-sm {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  /* Caption label — uppercase, tracked, the editorial section marker */
  .caption-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@layer utilities {
  /* Prompt/workflow editors opt into the entire area below the shared topbar. */
  .app-content:has([data-app-content="full-bleed"]) {
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  /* Resource list pages use a tighter content band below the shared topbar. */
  .app-content:has([data-app-content="list"]) {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }

  @media (min-width: 640px) {
    .app-content:has([data-app-content="list"]) {
      padding-top: 1.25rem;
      padding-bottom: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .app-content:has([data-app-content="list"]) {
      padding-top: 1.5rem;
      padding-bottom: 2.5rem;
    }
  }

  /* Explicit opt-in alias; base layer already styles all scrollbars. */
  .scrollbar-subtle {
    scrollbar-width: thin;
  }

  /* 手机通话页「开始通话」引导光晕：柔和向外扩散的涟漪环 */
  @keyframes mobile-call-ripple {
    0% {
      transform: scale(1);
      opacity: 0.55;
    }
    100% {
      transform: scale(1.85);
      opacity: 0;
    }
  }

  .mobile-call-ripple {
    animation: mobile-call-ripple 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }

  .mobile-call-ripple-delay {
    animation-delay: 1.2s;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-call-ripple,
    .mobile-call-ripple-delay {
      animation: none;
    }
  }
}