@import "tailwindcss";

@theme {
  --color-cream: #FAF7F2;
  --color-paper: #FFFFFF;
  --color-ink: #0D0D0D;
  --color-ink-soft: #3A3A3A;
  --color-ink-mute: #6B6B6B;
  --color-rule: #ECE7DC;
  --color-rule-strong: #1A1A1A;
  --color-honey: #FFDD00;
  --color-honey-deep: #FFD000;
  --color-honey-shade: #1A1500;
  --color-bark: #2A1F14;

  --font-display: "Cookie", "Comic Sans MS", cursive;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --radius-card: 24px;
  --radius-field: 14px;
  --radius-pill: 9999px;

  --shadow-pop: 6px 6px 0 0 var(--color-ink);
  --shadow-pop-sm: 4px 4px 0 0 var(--color-ink);
  --shadow-soft: 0 1px 2px rgba(13, 13, 13, 0.04), 0 8px 24px rgba(13, 13, 13, 0.06);
}

@layer base {
  html {
    background-color: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100vh;
  }

  ::selection {
    background: var(--color-honey);
    color: var(--color-honey-shade);
  }
}

@layer components {
  .btn-honey {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3.5 font-semibold;
    background: var(--color-honey);
    color: var(--color-honey-shade);
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-pop-sm);
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  }
  .btn-honey:hover {
    background: var(--color-honey-deep);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 0 var(--color-ink);
  }
  .btn-honey:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--color-ink);
  }

  .btn-ghost {
    @apply inline-flex items-center gap-1.5 text-sm font-medium;
    color: var(--color-ink-soft);
    transition: color 120ms ease;
  }
  .btn-ghost:hover { color: var(--color-ink); }

  .field {
    @apply block w-full px-4 py-3.5 text-base;
    background: var(--color-paper);
    color: var(--color-ink);
    border: 1.5px solid var(--color-rule);
    border-radius: var(--radius-field);
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  .field::placeholder { color: var(--color-ink-mute); }
  .field:focus {
    outline: none;
    border-color: var(--color-ink);
    box-shadow: 0 0 0 4px var(--color-honey);
  }

  .field-label {
    @apply block text-sm font-semibold mb-1.5;
    color: var(--color-ink);
  }

  .card {
    background: var(--color-paper);
    border: 1.5px solid var(--color-ink);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
  }

  .wordmark {
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-ink);
  }
  .wordmark::first-letter {
    color: var(--color-honey-shade);
  }
}