/* ─────────────────────────────────────────────────────────────
   Minerva Design System — Foundation tokens
   Source: Minerva design file (LVMH internal)
   ───────────────────────────────────────────────────────────── */

@import url("/assets/fonts/lvmh-sans.css");
@import url("/assets/fonts/lvmh-sans-text.css");

:root {
  /* ── Type families ─────────────────────────────────────────── */
  --ds-font-display: "LVMH Sans",      -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ds-font-body:    "LVMH Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ds-font-meta:    "LVMH Sans Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── Brand colors ───────────────────────────────────────────── */
  --ds-indigo-50:  #EFF8FF;
  --ds-indigo-100: #DFF0FF;
  --ds-indigo-200: #A3B0FF;
  --ds-indigo-300: #818CF8;
  --ds-indigo-400: #7B99DB;
  --ds-indigo-500: #5564DA;
  --ds-indigo-600: #576DDD;
  --ds-indigo-700: #5D63D4;
  --ds-indigo-800: #343782;

  /* ── Ink ────────────────────────────────────────────────────── */
  --ds-ink-900: #030F2B;
  --ds-ink-800: #0D0F26;
  --ds-ink-700: #1B1F3B;
  --ds-ink-600: #2E3856;
  --ds-ink-500: #474F6C;
  --ds-ink-400: #656B80;
  --ds-ink-300: #75747A;

  /* ── Neutral surfaces ───────────────────────────────────────── */
  --ds-bg:        #F9FBFC;
  --ds-surface:   #FFFFFF;
  --ds-surface-2: #F3F3F3;
  --ds-surface-3: #ECECEF;
  --ds-border:    #DBDCE0;

  /* ── Status ─────────────────────────────────────────────────── */
  --ds-status-info-bg:    #EFF8FF;
  --ds-status-info-fg:    #5564DA;
  --ds-status-warn-fg:    #DA6510;
  --ds-status-error-fg:   #DB2327;
  --ds-status-error-bg:   #FEE9E9;
  --ds-status-success-fg: #1A8754;

  /* ── Accents ────────────────────────────────────────────────── */
  --ds-accent-coral:  #D6755A;

  /* ── Spacing (4px base) ─────────────────────────────────────── */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --ds-radius-xs:   4px;
  --ds-radius-sm:   8px;
  --ds-radius-md:   12px;
  --ds-radius-lg:   16px;
  --ds-radius-xl:   24px;
  --ds-radius-pill: 32px;

  /* ── Elevation ──────────────────────────────────────────────── */
  --ds-shadow-panel:
    inset 0 1px 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 1px 0 rgba(255,255,255,0.25),
    0 8px 15px 0 rgba(0,0,0,0.05);
  --ds-shadow-toaster:
    0 4px 9px 0 rgba(201,208,238,0.10),
    0 16px 16px 0 rgba(201,208,238,0.09),
    0 36px 21px 0 rgba(201,208,238,0.05);
  --ds-shadow-press: 0 0 0 4px rgba(85,100,218,0.12);

  /* ── Type scale ─────────────────────────────────────────────── */
  --ds-type-h1:        700 32px/40px var(--ds-font-display);
  --ds-type-h2:        700 20px/28px var(--ds-font-display);
  --ds-type-h3:        700 16px/24px var(--ds-font-display);
  --ds-type-body:      400 16px/24px var(--ds-font-body);
  --ds-type-body-bold: 700 16px/24px var(--ds-font-body);
  --ds-type-sm:        400 14px/20px var(--ds-font-body);
  --ds-type-sm-bold:   700 14px/20px var(--ds-font-body);
  --ds-type-xs:        400 12px/16px var(--ds-font-body);
  --ds-type-xs-bold:   700 12px/16px var(--ds-font-body);
  --ds-type-meta:      600 13px/18px var(--ds-font-meta);
  --ds-type-meta-xs:   600 11px/14px var(--ds-font-meta);

  --ds-tracking-button: 0.02em;
  --ds-tracking-tight:  -0.01em;

  /* ── Motion ─────────────────────────────────────────────────── */
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);
  --ds-dur-fast: 120ms;
  --ds-dur-base: 200ms;
  --ds-dur-slow: 320ms;
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Lucide SVGs are inline by default — block removes the descender gap */
svg { display: block; flex-shrink: 0; }

/* ─── Semantic helpers ────────────────────────────────────────── */
.ds-h1   { font: var(--ds-type-h1);   color: var(--ds-ink-900); letter-spacing: var(--ds-tracking-tight); margin: 0; }
.ds-h2   { font: var(--ds-type-h2);   color: var(--ds-ink-900); margin: 0; }
.ds-h3   { font: var(--ds-type-h3);   color: var(--ds-ink-800); margin: 0; }
.ds-body { font: var(--ds-type-body); color: var(--ds-ink-900); margin: 0; }
.ds-sm   { font: var(--ds-type-sm);   color: var(--ds-ink-500); margin: 0; }
.ds-meta { font: var(--ds-type-xs);   color: var(--ds-ink-300); margin: 0; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  height: 32px;
  padding: 4px 12px;
  border-radius: var(--ds-radius-pill);
  font: 400 14px/20px var(--ds-font-body);
  letter-spacing: var(--ds-tracking-button);
  border: 1px solid var(--ds-indigo-400);
  background: var(--ds-surface);
  color: var(--ds-indigo-600);
  cursor: pointer;
  transition: background var(--ds-dur-fast) var(--ds-ease-standard);
}
.btn:hover  { background: var(--ds-indigo-50); }
.btn:active { background: var(--ds-indigo-800); border-color: var(--ds-indigo-800); color: #fff; }
.btn:disabled { border-color: #DCE3FB; color: var(--ds-indigo-200); cursor: not-allowed; }

.btn-primary {
  background: var(--ds-indigo-600);
  border-color: var(--ds-indigo-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(85,100,218,0.25);
}
.btn-primary:hover  { background: var(--ds-indigo-500); border-color: var(--ds-indigo-500); color: #fff; }
.btn-primary:active { background: var(--ds-indigo-800); border-color: var(--ds-indigo-800); color: #fff; }

.btn-lg    { height: 44px; padding: 0 24px; font-size: 15px; }
.btn-sm    { height: 24px; padding: 0 10px; font-size: 12px; }
.btn-field { border-radius: var(--ds-radius-sm); }

.btn-danger {
  background: var(--ds-status-error-fg);
  border-color: var(--ds-status-error-fg);
  color: #fff;
  box-shadow: 0 4px 12px rgba(219,35,39,0.18);
}
.btn-danger:hover  { background: #c41f23; border-color: #c41f23; color: #fff; }
.btn-danger:active { background: #a31a1d; border-color: #a31a1d; color: #fff; }

/* ─── Pills / chips ───────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: 28px;
  padding: 0 10px;
  border-radius: var(--ds-radius-pill);
  font: 400 13px/20px var(--ds-font-body);
  border: 1px solid var(--ds-indigo-200);
  color: var(--ds-indigo-500);
  background: var(--ds-surface);
  cursor: pointer;
  transition: background var(--ds-dur-fast);
}
.pill:hover, .pill.active { background: var(--ds-indigo-50); }

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-indigo-100);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
}

/* ─── Panel (floating surfaces : dropdowns, popovers) ─────────── */
.panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-panel);
}

/* ─── Input fields ────────────────────────────────────────────── */
.input-wrap {
  background: var(--ds-surface);
  border: 1px solid var(--ds-indigo-100);
  border-radius: var(--ds-radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font: 400 14px/20px var(--ds-font-body);
  transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
.input-wrap:focus-within {
  border-color: var(--ds-indigo-500);
  box-shadow: var(--ds-shadow-press);
}
.input-wrap input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font: inherit;
  color: var(--ds-ink-900);
}
.input-wrap input::placeholder { color: var(--ds-ink-300); }

/* ─── Checkboxes ──────────────────────────────────────────────── */
.cb {
  display: inline-flex;
  gap: var(--ds-space-2);
  align-items: center;
  font: 400 14px/20px var(--ds-font-body);
  letter-spacing: var(--ds-tracking-button);
  cursor: pointer;
}
.cb-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ds-indigo-200);
  background: var(--ds-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--ds-dur-fast), border-color var(--ds-dur-fast);
}
input[type="checkbox"]:checked + .cb-box {
  background: var(--ds-indigo-500);
  border-color: var(--ds-indigo-500);
}

/* ─── Status messages ─────────────────────────────────────────── */
.msg {
  background: var(--ds-surface);
  border: 1px solid var(--ds-indigo-100);
  border-radius: var(--ds-radius-sm);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  box-shadow: var(--ds-shadow-toaster);
}
.msg.msg-info    { border-color: var(--ds-indigo-500); }
.msg.msg-warn    { border-color: var(--ds-status-warn-fg); }
.msg.msg-error   { border-color: var(--ds-status-error-fg); background: var(--ds-status-error-bg); }
.msg.msg-success { border-color: var(--ds-status-success-fg); }

/* ─── Avatar ──────────────────────────────────────────────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-accent-coral);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--ds-font-body);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}