@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-sand: #F4F1EA;

  --color-lavender: #7C3AED;
  --color-lavender-deep: #6D28D9;
  --color-lavender-soft: #EDE4FE;
  --color-lavender-tint: #F5F0FE;
  --color-lavender-rule: #E0D4FB;

  --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-lavender-soft);
    color: var(--color-lavender-deep);
  }
}

@layer components {
  /* Canonical primary button. Use this for every button/submit across the app
     (inbox, shell, settings, auth). There is intentionally no second button
     style — do not reintroduce a yellow variant. */
  .btn-lavender {
    @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 text-sm font-semibold;
    background: var(--color-lavender);
    color: var(--color-paper);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 120ms ease;
  }
  .btn-lavender:hover { background: var(--color-lavender-deep); }
  .btn-lavender:disabled { opacity: 0.5; cursor: not-allowed; }

  .badge-lavender {
    @apply inline-flex items-center px-3 py-1 text-xs font-semibold;
    background: var(--color-lavender-soft);
    color: var(--color-lavender-deep);
    border-radius: var(--radius-pill);
  }

  .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-lavender);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
  }

  .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);
  }

  .flash-enter {
    opacity: 0;
    transform: translateX(120%);
  }
  .flash-leave {
    opacity: 0;
    transform: translateX(120%);
  }

  .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-lavender);
  }
}

@layer components {
  /* Marketing site (public homepage) primitives. Neo-brutalist: ink borders +
     hard offset "pop" shadows. Buttons set their own padding/size at call site. */
  .mk-tile {
    @apply inline-grid place-items-center w-8 h-8 rounded-[10px] bg-lavender text-paper;
    border: 1.5px solid var(--color-ink);
    box-shadow: var(--shadow-pop-sm);
    transform: rotate(-4deg);
  }
  .mk-pill {
    @apply inline-flex items-center gap-2 font-semibold rounded-pill bg-lavender text-paper;
    border: 1.5px solid var(--color-ink);
    box-shadow: var(--shadow-pop-sm);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .mk-pill:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 0 var(--color-ink); }
  .mk-pill-outline { @apply bg-paper text-ink; }

  .mk-frame {
    @apply bg-paper overflow-hidden;
    border: 1.5px solid var(--color-ink);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
  }
  .mk-chip {
    @apply bg-paper rounded-2xl px-3.5 py-3;
    border: 1.5px solid var(--color-ink);
    box-shadow: var(--shadow-pop-sm);
  }
  .mk-arc { background: radial-gradient(closest-side, var(--color-lavender-tint), transparent 72%); }
}