@import "tailwindcss";

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

@theme {
  --color-brew-bg: #FAF6F1;
  --color-brew-bg2: #F3EDE4;
  --color-brew-card: #FFFFFF;
  --color-brew-text: #2C1810;
  --color-brew-text2: #6B5744;
  --color-brew-text3: #9C8B7A;
  --color-brew-accent: #8B6914;
  --color-brew-accent2: #C4941A;
  --color-brew-border: #E8DFD3;
  --color-brew-espresso: #5C3317;
  --color-brew-coldbrew: #2F4F6F;
  --color-brew-pourover: #8B6914;
  --color-brew-danger: #B44040;
  --color-brew-success: #4A7C59;

  --font-serif: "Playfair Display", serif;
  --font-sans: "Source Sans 3", sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-card: 0 1px 3px rgba(44,24,16,0.06), 0 4px 12px rgba(44,24,16,0.04);
  --shadow-card-lg: 0 4px 16px rgba(44,24,16,0.08), 0 12px 32px rgba(44,24,16,0.06);
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scrollbar-gutter: stable;
    font-family: "Source Sans 3", sans-serif;
    background-color: #F3EDE4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  html.dark {
    background-color: #0E0704;
  }

  body {
    margin: 0;
    background-color: #F3EDE4;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  html.dark body {
    background-color: #0E0704;
  }

  #root {
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  input, select, textarea {
    font-family: "Source Sans 3", sans-serif;
  }

  button {
    font-family: "Source Sans 3", sans-serif;
  }
}

@layer utilities {
  .font-serif {
    font-family: "Playfair Display", serif;
  }

  .font-sans-brew {
    font-family: "Source Sans 3", sans-serif;
  }

  /* Sync badge pulse animation */
  .animate-sync-pulse {
    animation: sync-pulse 1.5s infinite;
  }

  @keyframes sync-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  /* Modal animations */
  .animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .animate-slide-up {
    animation: slide-up 0.3s ease-out;
  }

  @keyframes slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .animate-page-enter {
    animation: page-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes page-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Brew method bar */
  .brew-method-bar {
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
  }

  /* ── Sync cup indicator ── */
  .sync-cup-success {
    animation: sync-cup-fade 2.4s ease-in-out forwards;
  }

  @keyframes sync-cup-fade {
    0%   { opacity: 0; transform: scale(0.88); }
    8%   { opacity: 1; transform: scale(1); }
    68%  { opacity: 1; }
    100% { opacity: 0; }
  }

  .sync-steam {
    opacity: 0;
  }

  .sync-steam-1 { animation: sync-steam-rise 1.4s ease-out 0.1s forwards; }
  .sync-steam-2 { animation: sync-steam-rise 1.4s ease-out 0.3s forwards; }
  .sync-steam-3 { animation: sync-steam-rise 1.4s ease-out 0.5s forwards; }

  @keyframes sync-steam-rise {
    0%   { opacity: 0; transform: translateY(0); }
    25%  { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-4px); }
  }

  .sync-check {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: sync-check-draw 0.45s ease-out 0.65s forwards;
  }

  @keyframes sync-check-draw {
    to { stroke-dashoffset: 0; }
  }
}