@import "@decocms/ui/styles/global.css";
@import "@daveyplate/better-auth-ui/css";

@theme {
  /* Global/reusable section indicator — purple hue 289 */
  --color-global-section: oklch(0.7278 0.151 289);
  --color-global-section-fg: oklch(0.45 0.15 289);
  --color-global-section-fg-dark: oklch(0.78 0.15 289);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  /* Prevent iOS from zooming on input focus */
  input,
  select,
  textarea {
    font-size: max(1rem, 16px);
  }
  /* Larger base text on mobile — text-sm (0.875rem) → ~16px instead of 14px */
  @media (max-width: 768px) {
    html {
      font-size: 18.3px;
    }
  }
  svg {
    stroke-width: 1.75;
  }
}

@layer components {
  /* Animated todo checkbox — stroke-dasharray technique from checkbox source */
  .todo-cb {
    --ts1: 300ms;
    --ts2: 600ms;
    --size: 15px;
    --tick: var(--primary-foreground);
    --border-col: var(--border);
    --active-col: var(--primary);
    position: relative;
    pointer-events: none;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    border-radius: 3px;
    transition:
      box-shadow var(--ts1),
      background var(--ts1);
    box-shadow: inset 0 0 0 1.5px var(--b, var(--border-col));
  }

  .todo-cb svg {
    fill: none;
    stroke: var(--active-col);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    stroke-dasharray: var(--a, 86.12);
    stroke-dashoffset: var(--o, 86.12);
    transition:
      stroke-dasharray var(--ts2),
      stroke-dashoffset var(--ts2);
  }

  .todo-cb[data-checked="true"] {
    background: var(--active-col);
    --b: var(--active-col);
    transition-delay: 0.4s;
  }

  .todo-cb[data-checked="true"] svg {
    --a: 16 86.12;
    --o: 102.22;
    animation-name: todo-cb-fill;
    animation-delay: var(--ts1);
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-duration: var(--ts2);
  }

  .todo-cb[data-progress="true"] {
    --b: var(--active-col);
    animation: todo-cb-pulse 1.4s ease-in-out infinite;
  }

  @keyframes todo-cb-fill {
    0% {
      stroke: var(--active-col);
    }
    100% {
      stroke: var(--tick);
    }
  }

  @keyframes todo-cb-pulse {
    0%,
    100% {
      box-shadow: inset 0 0 0 1.5px var(--active-col);
    }
    50% {
      box-shadow: inset 0 0 0 1.5px
        color-mix(in oklch, var(--active-col) 30%, transparent);
    }
  }
}

@layer utilities {
  .shimmer {
    background-image: linear-gradient(
      90deg,
      currentColor 0%,
      currentColor 30%,
      oklch(from currentColor calc(l + 0.2) c h / 0.5) 50%,
      currentColor 70%,
      currentColor 100%
    ) !important;
    background-size: 200% 100% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shimmer-animation 3s linear infinite !important;
  }

  @keyframes shimmer-animation {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @keyframes grid-ripple {
    0% {
      background-color: transparent;
    }
    10% {
      background-color: var(--cell-color);
    }
    75% {
      background-color: transparent;
    }
    100% {
      background-color: transparent;
    }
  }

  @keyframes slideUpFade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Per-word fade-in for streamed assistant text (see markdown.tsx AnimatedText).
     Opacity-only so layout never shifts; runs once on mount. Tune the duration
     to taste (lower = snappier). */
  .stream-word {
    animation: streamWordIn 0.5s ease-out both;
  }

  @keyframes streamWordIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
