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

/* =====================================================================
   Thème « Minuit » — Cendrillon, 23h45.
   Dark luxe, editorial. Midnight blues layered with champagne gold.
   ===================================================================== */

@layer base {
  :root {
    /* Surfaces — deep midnight, slightly blue, layered */
    --minuit-bg: #0b1026;          /* page background, deepest */
    --minuit-surface: #141a35;     /* card / panel */
    --minuit-surface-raised: #1b2244;
    --minuit-border: #2a3358;      /* hairline borders */
    --minuit-border-soft: #20264a;

    /* Typography */
    --minuit-ink: #e8e6df;         /* warm off-white, primary text */
    --minuit-muted: #8a93b5;       /* slate-blue, secondary text */
    --minuit-faint: #5a6388;       /* tertiary / placeholders */

    /* Accent — champagne gold */
    --minuit-gold: #d4af6a;
    --minuit-gold-hover: #e6c987;
    --minuit-gold-soft: #d4af6a1f;

    /* States */
    --minuit-danger: #c96f6f;
    --minuit-danger-soft: #c96f6f1f;
    --minuit-success: #7fae8f;
    --minuit-success-soft: #7fae8f1f;
  }
}

@layer components {
  /* ---- Auth (Devise) shell -------------------------------------- */
  .minuit-auth {
    @apply relative flex min-h-screen w-full items-center justify-center px-4 py-12;
    background:
      radial-gradient(1100px 540px at 50% -10%, #1b2244 0%, transparent 60%),
      radial-gradient(800px 600px at 100% 110%, #141a3580 0%, transparent 55%),
      var(--minuit-bg);
  }

  /* Faint constellation / midnight shimmer over the auth backdrop */
  .minuit-auth::before {
    content: "";
    @apply pointer-events-none absolute inset-0;
    background-image:
      radial-gradient(1px 1px at 18% 28%, #d4af6a55 50%, transparent),
      radial-gradient(1px 1px at 72% 18%, #e8e6df40 50%, transparent),
      radial-gradient(1.5px 1.5px at 38% 72%, #d4af6a40 50%, transparent),
      radial-gradient(1px 1px at 88% 62%, #e8e6df30 50%, transparent),
      radial-gradient(1px 1px at 56% 44%, #8a93b540 50%, transparent);
  }

  .minuit-card {
    @apply relative z-10 w-full max-w-md rounded-2xl border px-8 py-10 shadow-2xl backdrop-blur;
    background: linear-gradient(180deg, #1b224499 0%, #141a35cc 100%);
    border-color: var(--minuit-border);
  }

  .minuit-eyebrow {
    @apply mb-2 inline-flex items-center gap-2 text-[0.7rem] font-medium uppercase tracking-[0.28em];
    color: var(--minuit-gold);
  }

  .minuit-title {
    @apply font-semibold tracking-tight;
    color: var(--minuit-ink);
  }

  .minuit-subtitle {
    @apply mt-1 text-sm;
    color: var(--minuit-muted);
  }

  /* ---- Form atoms ----------------------------------------------- */
  .minuit-label {
    @apply mb-1.5 block text-xs font-medium uppercase tracking-wider;
    color: var(--minuit-muted);
  }

  .minuit-input {
    @apply block w-full rounded-lg border px-3.5 py-2.5 text-sm shadow-inner transition;
    background-color: #0b102680;
    border-color: var(--minuit-border);
    color: var(--minuit-ink);
  }
  .minuit-input::placeholder { color: var(--minuit-faint); }
  .minuit-input:focus {
    @apply outline-none ring-2;
    border-color: var(--minuit-gold);
    --tw-ring-color: var(--minuit-gold-soft);
  }

  .minuit-checkbox {
    @apply h-4 w-4 rounded border bg-transparent;
    border-color: var(--minuit-border);
    accent-color: var(--minuit-gold);
  }

  /* ---- Buttons -------------------------------------------------- */
  .minuit-btn-primary {
    @apply inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5 text-sm font-semibold tracking-wide transition;
    background-color: var(--minuit-gold);
    color: #0b1026;
    box-shadow: 0 6px 20px -8px var(--minuit-gold);
  }
  .minuit-btn-primary:hover { background-color: var(--minuit-gold-hover); }

  .minuit-btn-ghost {
    @apply inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition;
    border-color: var(--minuit-border);
    color: var(--minuit-ink);
  }
  .minuit-btn-ghost:hover { border-color: var(--minuit-gold); color: var(--minuit-gold); }

  .minuit-btn-danger {
    @apply inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition;
    border-color: #c96f6f55;
    color: var(--minuit-danger);
    background-color: var(--minuit-danger-soft);
  }
  .minuit-btn-danger:hover { background-color: #c96f6f33; color: #e8b9b9; }

  /* ---- Links ---------------------------------------------------- */
  .minuit-link {
    @apply font-medium transition;
    color: var(--minuit-muted);
  }
  .minuit-link:hover { color: var(--minuit-gold); }

  /* ---- Flash / error blocks ------------------------------------- */
  .minuit-alert-error {
    @apply rounded-lg border px-4 py-3 text-sm;
    background-color: var(--minuit-danger-soft);
    border-color: #c96f6f55;
    color: #e8b9b9;
  }
  .minuit-alert-notice {
    @apply rounded-lg border px-4 py-3 text-sm;
    background-color: var(--minuit-success-soft);
    border-color: #7fae8f55;
    color: #bfe0cc;
  }

  /* ---- Admin chrome (« Minuit » console) ------------------------ */
  .minuit-nav-link {
    @apply text-sm transition;
    color: var(--minuit-muted);
  }
  .minuit-nav-link:hover { color: var(--minuit-ink); }
}