@import "tailwindcss";

/*
 * Flippy design tokens — "paper & departure board".
 * Paper ground, ink actions, cobalt accent, charcoal flap tiles.
 * Legacy hs-* names are kept because the ported tool partials use them;
 * their values now resolve to the Flippy palette.
 */
@theme {
  --color-paper: #fafafa;
  --color-ink: #17181c;
  --color-flap: #212227;
  --color-accent: #3e63dd; /* cobalt — replaced marigold per André */
  --color-marigold: #3e63dd; /* legacy alias, do not use in new code */
  --color-flip-green: #2f9e68;

  --color-hs-brand-primary: #17181c; /* ink — primary actions */
  --color-hs-brand-primary-fg: #000000; /* action hover */
  --color-hs-brand-secondary: #3e63dd; /* cobalt accent */
  --color-hs-brand: #17181c;
  --color-hs-primary-fg: #fbfaf6; /* light text on the drop overlay */
  --color-hs-green: #2f9e68;
  --color-hs-black: #17181c;
  --color-content-tertiary: #6b7280; /* neutral gray text */
  --color-quarterary: #9ca3af; /* neutral gray-400 */
  --color-primary: #e5e7eb; /* neutral border */
  --color-gray: #f3f4f6; /* focus ring */

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-logo: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --text-md: 1rem;
  --font-weight-regular: 400;

  --animate-fade-in: fade-in 0.1s ease-out;
  --animate-slide-down: slide-down 0.05s ease-in-out;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes slide-down {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Section paddings used by the component_wrapper helper. */
@layer components {
  .wrapper-pt-default {
    padding-top: 4rem;
  }

  .wrapper-pb-default {
    padding-bottom: 4rem;
  }

  .wrapper-pt-small {
    padding-top: 2rem;
  }

  .wrapper-pb-small {
    padding-bottom: 2rem;
  }

  .wrapper-pt-large {
    padding-top: 6rem;
  }

  .wrapper-pb-large {
    padding-bottom: 6rem;
  }
}

/* Shimmer overlay on the upload progress bar (ported from HS landing CSS). */
.upload-bar-shimmer {
  position: relative;
  overflow: hidden;
}

.upload-bar-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: bar-shimmer 2s ease-in-out infinite;
}

@keyframes bar-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ————— Flippy split-flap board ————— */
.flap-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-flap);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 0.5em 0.75em;
  min-width: 3.4em;
  box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  perspective: 400px;
}

/* the horizontal split line of a flap board */
.flap-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: rgba(251, 250, 246, 0.16);
  pointer-events: none;
}

.flap-tile--accent {
  background: var(--color-accent);
  color: var(--color-paper);
}

.flap-tile--accent::after {
  background: rgba(251, 250, 246, 0.18);
}

.flap-flipping {
  animation: flap-turn 0.45s cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes flap-turn {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-88deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flap-flipping {
    animation: none;
  }
}

::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}

/* ————— Friendly base ————— */
@layer base {
  body {
    font-family: var(--font-sans);
  }
}

.font-logo {
  font-family: var(--font-logo);
}

/* Fredoka needs air, not tight tracking */
.font-display {
  letter-spacing: -0.01em !important;
}