/* ──────────────────────────────────────────────────────────────
   ASTRO DESIGN TOKENS — source unique de vérité
   Importé par : landing, dashboard, panel extension
   Light mode premium · palette Astro #7F77DD
   ────────────────────────────────────────────────────────────── */

:root {
  /* ——— Palette ——— */
  --astro-canvas:        #FAFAFE;
  --astro-surface:       #FFFFFF;
  --astro-surface-elev:  #FFFFFF;
  --astro-surface-sunk:  #F6F5FC;

  --astro-accent:        #7F77DD;
  --astro-accent-600:    #6B63D0;
  --astro-accent-700:    #5C54B8;
  --astro-accent-100:    #EEEDFE;
  --astro-accent-50:     #F7F6FF;

  --astro-ink-900:       #0F0F1E;
  --astro-ink-700:       #2A2A3E;
  --astro-ink-500:       #4A4A5C;
  --astro-ink-300:       #8B8B9E;
  --astro-ink-200:       #B4B4C5;

  --astro-line-100:      #EFEFF6;
  --astro-line-200:      #E4E4EF;
  --astro-line-300:      #D4D4E2;

  --astro-success:       #22C55E;
  --astro-success-50:    #F0FDF4;
  --astro-warning:       #F59E0B;
  --astro-warning-50:    #FFFBEB;
  --astro-danger:        #EF4444;
  --astro-danger-50:     #FEF2F2;
  --astro-info:          #3B82F6;
  --astro-info-50:       #EFF6FF;

  /* ——— Gradients signature ——— */
  --astro-grad-hero:     linear-gradient(135deg, #EEEDFE 0%, #FFFFFF 60%);
  --astro-grad-accent:   linear-gradient(135deg, #7F77DD 0%, #5C54B8 100%);
  --astro-grad-mesh:     radial-gradient(ellipse 800px 400px at 80% -10%, rgba(127,119,221,.18) 0%, transparent 60%),
                         radial-gradient(ellipse 600px 400px at -10% 40%, rgba(127,119,221,.10) 0%, transparent 60%);

  /* ——— Typo ——— */
  --astro-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --astro-font-display:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --astro-fs-2xs:        11px;
  --astro-fs-xs:         12px;
  --astro-fs-sm:         14px;
  --astro-fs-md:         16px;
  --astro-fs-lg:         18px;
  --astro-fs-xl:         20px;
  --astro-fs-2xl:        24px;
  --astro-fs-3xl:        32px;
  --astro-fs-4xl:        48px;
  --astro-fs-5xl:        64px;

  --astro-fw-regular:    400;
  --astro-fw-medium:     500;
  --astro-fw-semibold:   600;
  --astro-fw-bold:       700;

  --astro-lh-tight:      1.15;
  --astro-lh-snug:       1.3;
  --astro-lh-normal:     1.5;
  --astro-lh-relaxed:    1.7;

  --astro-tracking-tight:-0.02em;
  --astro-tracking-normal:0;
  --astro-tracking-wide: 0.02em;

  /* ——— Spacing (8px grid) ——— */
  --astro-space-1:       4px;
  --astro-space-2:       8px;
  --astro-space-3:       12px;
  --astro-space-4:       16px;
  --astro-space-5:       20px;
  --astro-space-6:       24px;
  --astro-space-8:       32px;
  --astro-space-10:      40px;
  --astro-space-12:      48px;
  --astro-space-16:      64px;
  --astro-space-20:      80px;
  --astro-space-24:      96px;

  /* ——— Radius ——— */
  --astro-r-xs:          6px;
  --astro-r-sm:          8px;
  --astro-r-md:          12px;
  --astro-r-lg:          16px;
  --astro-r-xl:          20px;
  --astro-r-2xl:         24px;
  --astro-r-full:        9999px;

  /* ——— Shadows ——— */
  --astro-shadow-xs:     0 1px 2px rgba(15,15,30,.04);
  --astro-shadow-sm:     0 1px 2px rgba(15,15,30,.04), 0 2px 4px rgba(15,15,30,.04);
  --astro-shadow-md:     0 1px 2px rgba(15,15,30,.04), 0 8px 24px rgba(127,119,221,.08);
  --astro-shadow-lg:     0 4px 12px rgba(15,15,30,.06), 0 16px 48px rgba(127,119,221,.12);
  --astro-shadow-xl:     0 8px 24px rgba(15,15,30,.08), 0 24px 72px rgba(127,119,221,.18);
  --astro-shadow-glow:   0 0 0 4px rgba(127,119,221,.12);

  /* ——— Motion ——— */
  --astro-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --astro-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --astro-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --astro-duration-fast: 120ms;
  --astro-duration-base: 200ms;
  --astro-duration-slow: 320ms;

  /* ——— Z-index ——— */
  --astro-z-dropdown:    1000;
  --astro-z-sticky:      1020;
  --astro-z-overlay:     1040;
  --astro-z-modal:       1060;
  --astro-z-toast:       1080;
  --astro-z-tooltip:     1100;
}

/* ——— Reset & base typography ——— */
.astro-root,
.astro-root * {
  box-sizing: border-box;
}

.astro-root {
  font-family: var(--astro-font-sans);
  font-size: var(--astro-fs-md);
  line-height: var(--astro-lh-normal);
  color: var(--astro-ink-700);
  background: var(--astro-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

.astro-root h1, .astro-root h2, .astro-root h3, .astro-root h4 {
  color: var(--astro-ink-900);
  letter-spacing: var(--astro-tracking-tight);
  font-weight: var(--astro-fw-semibold);
  line-height: var(--astro-lh-tight);
  margin: 0;
}
.astro-root h1 { font-size: var(--astro-fs-4xl); font-weight: var(--astro-fw-bold); }
.astro-root h2 { font-size: var(--astro-fs-3xl); }
.astro-root h3 { font-size: var(--astro-fs-2xl); }
.astro-root h4 { font-size: var(--astro-fs-xl); }

.astro-root p { margin: 0; color: var(--astro-ink-500); }

/* Chiffres tabulaires pour tout KPI/prix */
.astro-num, .astro-root .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11";
}

/* ——— Composants de base ——— */

/* Bouton */
.astro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--astro-space-2);
  padding: 10px 18px;
  border-radius: var(--astro-r-md);
  font-family: var(--astro-font-sans);
  font-size: var(--astro-fs-sm);
  font-weight: var(--astro-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--astro-duration-base) var(--astro-ease);
  white-space: nowrap;
  user-select: none;
}

.astro-btn-primary {
  background: var(--astro-accent);
  color: #FFFFFF;
  box-shadow: var(--astro-shadow-sm), inset 0 1px 0 rgba(255,255,255,.15);
}
.astro-btn-primary:hover {
  background: var(--astro-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--astro-shadow-md);
}
.astro-btn-primary:active { transform: translateY(0); }

.astro-btn-secondary {
  background: var(--astro-surface);
  color: var(--astro-ink-900);
  border-color: var(--astro-line-200);
}
.astro-btn-secondary:hover {
  border-color: var(--astro-accent);
  color: var(--astro-accent-700);
}

.astro-btn-ghost {
  background: transparent;
  color: var(--astro-ink-500);
}
.astro-btn-ghost:hover {
  background: var(--astro-accent-50);
  color: var(--astro-accent-700);
}

.astro-btn-lg { padding: 14px 24px; font-size: var(--astro-fs-md); border-radius: var(--astro-r-lg); }
.astro-btn-sm { padding: 8px 12px; font-size: var(--astro-fs-xs); }

/* Card */
.astro-card {
  background: var(--astro-surface);
  border: 1px solid var(--astro-line-100);
  border-radius: var(--astro-r-lg);
  box-shadow: var(--astro-shadow-xs);
}
.astro-card-pad { padding: var(--astro-space-6); }
.astro-card-hover {
  transition: transform var(--astro-duration-base) var(--astro-ease),
              box-shadow var(--astro-duration-base) var(--astro-ease),
              border-color var(--astro-duration-base) var(--astro-ease);
}
.astro-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--astro-shadow-md);
  border-color: var(--astro-line-200);
}

/* Input */
.astro-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--astro-line-200);
  border-radius: var(--astro-r-md);
  background: var(--astro-surface);
  font-family: var(--astro-font-sans);
  font-size: var(--astro-fs-sm);
  color: var(--astro-ink-900);
  transition: all var(--astro-duration-base) var(--astro-ease);
}
.astro-input:focus {
  outline: none;
  border-color: var(--astro-accent);
  box-shadow: var(--astro-shadow-glow);
}
.astro-input::placeholder { color: var(--astro-ink-300); }

/* Badge */
.astro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--astro-r-full);
  font-size: var(--astro-fs-xs);
  font-weight: var(--astro-fw-medium);
  background: var(--astro-accent-100);
  color: var(--astro-accent-700);
}
.astro-badge-success { background: var(--astro-success-50); color: var(--astro-success); }
.astro-badge-warning { background: var(--astro-warning-50); color: var(--astro-warning); }
.astro-badge-danger  { background: var(--astro-danger-50);  color: var(--astro-danger);  }
.astro-badge-info    { background: var(--astro-info-50);    color: var(--astro-info);    }
.astro-badge-neutral { background: var(--astro-surface-sunk); color: var(--astro-ink-500); }

/* Tag pastille (accent) */
.astro-tag-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--astro-r-full);
  background: var(--astro-accent-50);
  border: 1px solid var(--astro-accent-100);
  color: var(--astro-accent-700);
  font-size: var(--astro-fs-xs);
  font-weight: var(--astro-fw-medium);
}
.astro-tag-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--astro-accent);
  box-shadow: 0 0 0 3px rgba(127,119,221,.2);
  animation: astro-pulse 2s infinite;
}
@keyframes astro-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127,119,221,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(127,119,221,0); }
}

/* Skeleton loading */
.astro-skel {
  background: linear-gradient(90deg,
    var(--astro-surface-sunk) 0%,
    var(--astro-line-100) 50%,
    var(--astro-surface-sunk) 100%);
  background-size: 200% 100%;
  animation: astro-skel 1.6s ease-in-out infinite;
  border-radius: var(--astro-r-sm);
}
@keyframes astro-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Divider */
.astro-hr {
  border: 0;
  height: 1px;
  background: var(--astro-line-100);
  margin: var(--astro-space-6) 0;
}

/* Focus ring */
.astro-focus:focus-visible {
  outline: none;
  box-shadow: var(--astro-shadow-glow);
}