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

@layer base {
  :root {
    /* ── Baby Bloom Color System ───────────────────────────────── */
    --baby-coral:          #ff7f6b;
    --baby-coral-light:    #fff1ee;
    --baby-coral-dark:     #e85d47;
    --baby-peach:          #ffeedd;
    --baby-lavender:       #c4b5fd;
    --baby-lavender-light: #f5f3ff;
    --baby-mint:           #6ee7b7;
    --baby-mint-light:     #ecfdf5;
    --baby-blush:          #fce7f3;
    --baby-cream:          #fffaf7;
    --baby-slate:          #64748b;

    /* ── Dynamic brand tokens (overridden from Admin Settings) ─── */
    --brand-primary:    #ff7f6b;
    --brand-secondary:  #c4b5fd;
    --brand-gradient:   linear-gradient(135deg, #ff7f6b 0%, #fca5a5 50%, #f9a8d4 100%);

    /* ── Border-radius token (overridden from Admin Settings) ──── */
    --brand-radius: 0.75rem;   /* default: 12px */

    /* ── Currency (overridden from Admin Settings) ─────────────── */
    --currency-symbol:   "€";
    --currency-position: "before";
  }

  * {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html { font-size: 15px; }

  body {
    @apply font-sans text-slate-700 bg-[#fffaf7];
    line-height: 1.6;
  }

  ::selection {
    background-color: var(--brand-primary);
    color: white;
  }

  /* Smooth scrollbar */
  ::-webkit-scrollbar              { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track        { background: transparent; }
  ::-webkit-scrollbar-thumb        { background: #fca5a5; border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover  { background: var(--brand-primary); }
}

@layer components {
  /* ─── Baby Card System ──────────────────────────────────────── */
  .baby-card {
    @apply bg-white border border-rose-50 shadow-sm transition-shadow duration-300;
    border-radius: var(--brand-radius);
  }

  .baby-card-hover {
    @apply baby-card hover:shadow-md hover:-translate-y-0.5 transition-all duration-300;
  }

  /* ─── Baby Button System ─────────────────────────────────────── */
  .baby-btn {
    @apply inline-flex items-center justify-center gap-2 font-bold text-sm
           px-6 py-2.5 transition-all duration-300 active:scale-95;
    border-radius: var(--brand-radius);
  }

  .baby-btn-primary {
    @apply baby-btn text-white shadow-md;
    background-color: var(--brand-primary);
  }
  .baby-btn-primary:hover { filter: brightness(0.92); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

  .baby-btn-secondary {
    @apply baby-btn bg-white border border-rose-100 hover:bg-rose-50 hover:border-rose-200;
    color: var(--brand-primary);
  }
  
  .baby-btn-glass {
    @apply baby-btn bg-white/20 backdrop-blur-md border border-white/30 text-white hover:bg-white/30 transition-all;
  }

  .baby-btn-dark {
    @apply baby-btn bg-slate-800 text-white hover:bg-slate-700;
  }

  /* ─── Admin Button System (unified size & shape) ─────────────── */
  .admin-btn {
    @apply inline-flex items-center gap-2 font-semibold text-sm
           px-4 py-2 rounded-xl transition-all duration-200 active:scale-95 shrink-0;
  }

  .admin-btn-primary {
    @apply admin-btn bg-slate-900 text-white hover:bg-[var(--brand-primary)] shadow-sm;
  }

  .admin-btn-danger {
    @apply admin-btn bg-rose-50 text-rose-500 hover:bg-rose-500 hover:text-white;
  }

  .admin-btn-ghost {
    @apply admin-btn bg-slate-100 text-slate-600 hover:bg-slate-200;
  }

  /* ─── Baby Badge / Chip ──────────────────────────────────────── */
  .baby-badge {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px]
           font-bold uppercase tracking-wider shadow-sm;
  }

  .baby-badge-coral    { @apply baby-badge bg-[var(--baby-coral-light)] text-[var(--baby-coral-dark)]; }
  .baby-badge-lavender { @apply baby-badge bg-[var(--baby-lavender-light)] text-purple-600; }
  .baby-badge-mint     { @apply baby-badge bg-[var(--baby-mint-light)] text-emerald-700; }

  /* ─── Baby Input ─────────────────────────────────────────────── */
  .baby-input {
    @apply w-full px-4 py-2.5 bg-white border border-slate-100
           text-slate-700 text-sm placeholder:text-slate-300
           focus:outline-none focus:ring-2 focus:ring-rose-100 focus:border-rose-200
           transition-all duration-200;
    border-radius: var(--brand-radius);
  }

  /* Admin input */
  .admin-input {
    @apply w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl
           text-slate-800 text-sm placeholder:text-slate-400
           focus:outline-none focus:ring-2 focus:ring-rose-200 focus:border-brand-primary
           transition-all duration-200;
  }

  /* ─── Section Heading ────────────────────────────────────────── */
  .baby-section-title    { @apply text-2xl font-black text-slate-800 tracking-tight; }
  .baby-section-subtitle { @apply text-[11px] font-bold uppercase tracking-widest text-[var(--brand-primary)] opacity-80; }

  /* ─── Admin components ───────────────────────────────────────── */
  .admin-page-header { @apply flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6; }
  .admin-table-card  { @apply bg-white rounded-2xl border border-slate-100 overflow-hidden shadow-sm; }
  .admin-table-th    { @apply px-5 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500; }
  .admin-table-td    { @apply px-5 py-3.5; }
}

@layer utilities {
  .rounded-brand { border-radius: var(--brand-radius); }
  .bg-brand-primary { background-color: var(--brand-primary); }
  .text-brand-primary { color: var(--brand-primary); }
  .border-brand-primary { border-color: var(--brand-primary); }
  .bg-brand-gradient { background: var(--brand-gradient); }
  
  .glass-card {
    @apply bg-white/70 backdrop-blur-md border border-white/40 shadow-sm;
    border-radius: var(--brand-radius);
  }

  .glass-nav {
    @apply bg-white/80 backdrop-blur-lg border-b border-white/20 shadow-sm;
  }
}