@tailwind base;
@tailwind components;
@tailwind utilities;

/* Handover design tokens - single source of truth for brand colours and type.
   Matches the Tailwind theme (ink/paper/live/hairline) for non-Tailwind CSS. */
:root {
  --color-ink: #37322F;       /* text, primary UI, primary ring */
  --color-paper: #F7F5F3;     /* app background */
  --color-live: #22C55E;      /* accent only - status dots, rings, tagline */
  --color-secondary: #828387; /* secondary text */
  --color-hairline: #E0DEDB;  /* borders/dividers */
  --font-display: 'Newsreader', ui-serif, Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
}

/* Global background color for all pages */
@layer base {
  html {
    background-color: var(--color-paper);
  }
  body {
    background-color: var(--color-paper);
    font-family: var(--font-ui);
  }

  /* Brand green accents: keyboard focus and text selection pick up the
     live green so the accent is felt app-wide without recolouring fills */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--color-live);
    outline-offset: 2px;
  }
  ::selection {
    background-color: rgba(34, 197, 94, 0.2);
  }

  /* Keep browser autofill from painting inputs blue - fill with white and
     brand ink text so autofilled forms still look like ours */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--color-ink);
    caret-color: var(--color-ink);
    transition: background-color 5000s ease-in-out 0s;
  }
}

@layer components {
  /* Landing hero: blurred colour fields that wander behind the headline.
     Each blob follows its own multi-waypoint path so something is always
     in motion. Pure CSS - no script; hidden from motion-sensitive users */
  .hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.65;
    will-change: transform;
  }
  .hero-blob-green {
    width: 480px;
    height: 480px;
    top: -120px;
    left: 4%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.24), transparent 70%);
    animation: hero-wander-a 22s ease-in-out infinite;
  }
  .hero-blob-ink {
    width: 560px;
    height: 560px;
    top: -80px;
    right: 0%;
    background: radial-gradient(circle, rgba(55, 50, 47, 0.14), transparent 70%);
    animation: hero-wander-b 28s ease-in-out infinite;
  }
  .hero-blob-green-low {
    width: 460px;
    height: 460px;
    top: 220px;
    left: 38%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15), transparent 70%);
    animation: hero-wander-c 26s ease-in-out infinite;
  }
  .hero-blob-mint {
    width: 380px;
    height: 380px;
    top: 60px;
    left: 26%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.18), transparent 70%);
    animation: hero-wander-b 19s ease-in-out infinite reverse;
  }
  .hero-blob-green-right {
    width: 420px;
    height: 420px;
    top: 320px;
    right: 10%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.14), transparent 70%);
    animation: hero-wander-a 32s ease-in-out infinite reverse;
  }

  /* Three looping paths with different shapes so the motion never syncs up */
  @keyframes hero-wander-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    25%  { transform: translate3d(160px, 60px, 0) scale(1.12); }
    50%  { transform: translate3d(80px, 160px, 0) scale(0.94); }
    75%  { transform: translate3d(-90px, 70px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes hero-wander-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    30%  { transform: translate3d(-140px, 110px, 0) scale(1.15); }
    60%  { transform: translate3d(60px, 190px, 0) scale(0.9); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes hero-wander-c {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    20%  { transform: translate3d(110px, -80px, 0) scale(1.1); }
    55%  { transform: translate3d(-130px, -40px, 0) scale(1.18); }
    80%  { transform: translate3d(-40px, 90px, 0) scale(0.92); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-blob { animation: none; }
  }

  /* Landing capabilities carousel: the scroller pans horizontally with snap
     points, so the native scrollbar is visual noise - progress is shown by
     the bar beneath it instead */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Handover ring mark (shared/_handover_mark partial).
     On load each ring draws itself in; on hover the rings swap places -
     the handover gesture. 79.2 is the ring circumference (2 * pi * 12.6);
     16.3 is the horizontal distance between the two ring centres. */
  .handover-mark .mark-ring {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .handover-mark:hover .mark-ring-ink,
  .group:hover .handover-mark .mark-ring-ink {
    transform: translateX(16.3px);
  }
  .handover-mark:hover .mark-ring-green,
  .group:hover .handover-mark .mark-ring-green {
    transform: translateX(-16.3px);
  }
  /* Page-load intro: half a handover - the rings start on swapped sides,
     hold a beat, then glide home. Same travel and easing as the hover swap */
  .mark-intro .mark-ring-ink {
    animation: mark-intro-ink 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both;
  }
  .mark-intro .mark-ring-green {
    animation: mark-intro-green 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both;
  }
  @keyframes mark-intro-ink {
    from { transform: translateX(16.3px); }
    to { transform: translateX(0); }
  }
  @keyframes mark-intro-green {
    from { transform: translateX(-16.3px); }
    to { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mark-intro .mark-ring-ink,
    .mark-intro .mark-ring-green { animation: none; }
    .handover-mark .mark-ring { transition: none; }
  }

  /* Quick-reply buttons under AI chat messages: only the newest message's
     options are actionable - older ones vanish as the conversation moves on */
  #messages > :not(:last-child) .quick-replies {
    display: none;
  }

  /* Sign-up wizard step indicators - state is set by wizard_controller.js */
  .wizard-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(55, 50, 47, 0.15);
    background: #fff;
    color: rgba(55, 50, 47, 0.5);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  [data-wizard-state="active"] .wizard-step-dot {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
  }
  [data-wizard-state="done"] .wizard-step-dot {
    background: var(--color-live);
    border-color: var(--color-live);
    color: #fff;
  }
  [data-wizard-state="active"] .wizard-step-label {
    color: var(--color-ink);
    font-weight: 500;
  }
}

/*

@layer components {
  .{
    @apply py-2 px-4 bg-blue-200;
  }
}

*/