/*  ===================================================
    ScaleCity Design System · v1.0 · 2026-05-15
    Source de vérité unique pour home / pages soin / dashboard / login.
    Préfixé `sc-` pour éviter collisions avec CSS existant.
    =================================================== */

:root {

  /* === PALETTE — Cream · Terre · Ink === */
  --sc-bg-base:      #f8f3eb;
  --sc-bg-soft:      #f1e8d9;
  --sc-bg-mid:       #ebe0cb;
  --sc-paper:        #fefcf8;

  --sc-beige-50:     #f6ecd9;
  --sc-beige-100:    #f1e8d9;
  --sc-beige-200:    #ebd9c1;
  --sc-beige-300:    #d4b89a;
  --sc-beige-400:    #c8a487;

  --sc-terre-50:     #f3e2d0;
  --sc-terre-100:    #e8d0bc;
  --sc-terre-200:    #c89878;
  --sc-terre-400:    #b88a6a;
  --sc-terre-500:    #a86d4a;   /* primary action */
  --sc-terre-600:    #8a5d40;
  --sc-terre-700:    #6e3d1f;
  --sc-terre-900:    #5a3a25;   /* marron — display color */

  --sc-ink:          #1a1612;
  --sc-ink-1:        #2a2421;
  --sc-ink-2:        #4a3f36;
  --sc-ink-3:        #80726a;
  --sc-ink-4:        #a09289;

  --sc-line:         #e4d6c0;
  --sc-line-soft:    #efe3cc;
  --sc-line-strong:  #d4c7b1;

  --sc-success:      #5a8a5a;
  --sc-success-bg:   rgba(90, 138, 90, 0.14);
  --sc-warning:      #c66b3e;
  --sc-warning-bg:   rgba(198, 107, 62, 0.14);
  --sc-info:         #5d7a9a;
  --sc-info-bg:      rgba(93, 122, 154, 0.14);

  /* === SPACING — base 4 === */
  --sc-s-0:  0;
  --sc-s-1:  4px;
  --sc-s-2:  8px;
  --sc-s-3:  12px;
  --sc-s-4:  16px;
  --sc-s-5:  20px;
  --sc-s-6:  24px;
  --sc-s-8:  32px;
  --sc-s-10: 40px;
  --sc-s-12: 48px;
  --sc-s-14: 56px;
  --sc-s-16: 64px;
  --sc-s-20: 80px;
  --sc-s-24: 96px;
  --sc-s-32: 128px;

  /* === RADIUS === */
  --sc-r-xs:   3px;
  --sc-r-sm:   6px;
  --sc-r-md:   10px;
  --sc-r-lg:   14px;
  --sc-r-xl:   20px;
  --sc-r-full: 999px;

  /* === SHADOWS — subtiles, ton terre === */
  --sc-shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.04);
  --sc-shadow-sm: 0 2px 8px rgba(26, 22, 18, 0.06);
  --sc-shadow-md: 0 8px 24px rgba(26, 22, 18, 0.08);
  --sc-shadow-lg: 0 18px 48px rgba(26, 22, 18, 0.10);
  --sc-shadow-xl: 0 32px 80px rgba(26, 22, 18, 0.14);
  --sc-shadow-focus: 0 0 0 4px rgba(168, 109, 74, 0.12);

  /* === TRANSITIONS — Apple/Linear-like === */
  --sc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --sc-ease-out:    cubic-bezier(0.16, 0.84, 0.44, 1);
  --sc-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  --sc-dur-fast:    160ms;
  --sc-dur-base:    240ms;
  --sc-dur-slow:    420ms;
  --sc-dur-premium: 700ms;

  --sc-t-fast:    var(--sc-dur-fast) var(--sc-ease);
  --sc-t-base:    var(--sc-dur-base) var(--sc-ease);
  --sc-t-slow:    var(--sc-dur-slow) var(--sc-ease-out);
  --sc-t-premium: var(--sc-dur-premium) var(--sc-ease-spring);

  /* === TYPO === */
  --sc-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sc-text-xs:      11px;
  --sc-text-sm:      12px;
  --sc-text-base:    13px;
  --sc-text-md:      14px;
  --sc-text-lg:      15px;
  --sc-text-xl:      17px;
  --sc-text-2xl:     20px;
  --sc-text-3xl:     24px;
  --sc-text-4xl:     32px;
  --sc-text-5xl:     44px;
  --sc-text-6xl:     56px;
  --sc-text-hero:    clamp(48px, 9vw, 96px);
  --sc-text-display: clamp(56px, 11vw, 132px);

  --sc-tracking-tight:  -0.02em;
  --sc-tracking-snug:   -0.01em;
  --sc-tracking-normal: 0;
  --sc-tracking-wide:   0.5px;
  --sc-tracking-up-1:   1.5px;
  --sc-tracking-up-2:   2px;
  --sc-tracking-up-3:   3.5px;

  --sc-lh-tight:  1.05;
  --sc-lh-snug:   1.2;
  --sc-lh-normal: 1.5;
  --sc-lh-loose:  1.7;

  /* === LAYOUT === */
  --sc-container:  1280px;
  --sc-container-narrow: 1080px;
  --sc-container-narrower: 880px;
  --sc-bleed-x:    var(--sc-s-8);   /* padding horizontal sections */

  /* === Z-INDEX === */
  --sc-z-base:    1;
  --sc-z-sticky:  40;
  --sc-z-nav:     50;
  --sc-z-banner:  60;
  --sc-z-overlay: 80;
  --sc-z-modal:   100;
  --sc-z-toast:   120;
}

/* ============================================
   COMPOSANTS — préfixés `sc-`
   ============================================ */

/* === BUTTONS === */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-s-3);
  padding: 14px 26px;
  background: var(--sc-terre-500);
  color: var(--sc-bg-base);
  border: 1px solid var(--sc-terre-500);
  border-radius: var(--sc-r-full);
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-sm);
  font-weight: 500;
  letter-spacing: var(--sc-tracking-up-1);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--sc-t-base),
    color var(--sc-t-base),
    border-color var(--sc-t-base),
    transform var(--sc-t-fast),
    box-shadow var(--sc-t-base);
  white-space: nowrap;
}
.sc-btn:hover {
  background: var(--sc-terre-900);
  border-color: var(--sc-terre-900);
  transform: translateY(-1px);
  box-shadow: var(--sc-shadow-md);
}
.sc-btn:active { transform: translateY(0); transition-duration: var(--sc-dur-fast); }
.sc-btn:focus-visible { outline: 2px solid var(--sc-terre-500); outline-offset: 3px; }

.sc-btn-ghost {
  background: transparent;
  color: var(--sc-ink-2);
  border-color: var(--sc-line);
}
.sc-btn-ghost:hover {
  background: var(--sc-bg-soft);
  color: var(--sc-ink);
  border-color: var(--sc-line-strong);
  transform: none;
  box-shadow: none;
}

.sc-btn-light {
  background: var(--sc-paper);
  color: var(--sc-ink);
  border-color: var(--sc-paper);
}
.sc-btn-light:hover {
  background: var(--sc-terre-500);
  color: var(--sc-paper);
  border-color: var(--sc-terre-500);
}

.sc-btn-danger {
  background: transparent;
  color: var(--sc-warning);
  border-color: var(--sc-warning);
}
.sc-btn-danger:hover {
  background: var(--sc-warning);
  color: var(--sc-bg-base);
}

.sc-btn-sm  { padding: 9px 16px; font-size: var(--sc-text-xs); letter-spacing: 1px; }
.sc-btn-lg  { padding: 18px 36px; font-size: var(--sc-text-base); }

.sc-btn svg { width: 14px; height: 14px; }

/* === CARDS === */
.sc-card {
  background: var(--sc-paper);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-s-6) var(--sc-s-8);
  transition:
    transform var(--sc-t-base),
    box-shadow var(--sc-t-base),
    border-color var(--sc-t-base);
}
.sc-card-hover:hover {
  border-color: var(--sc-line-strong);
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-2px);
}
.sc-card-flat {
  background: var(--sc-bg-soft);
  border: 1px solid var(--sc-line);
}

/* === INPUTS === */
.sc-input,
.sc-textarea,
.sc-select {
  width: 100%;
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-md);
  font-weight: 400;
  color: var(--sc-ink);
  padding: 12px 16px;
  background: var(--sc-paper);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-md);
  outline: none;
  transition: border-color var(--sc-t-fast), box-shadow var(--sc-t-fast);
}
.sc-input:focus,
.sc-textarea:focus,
.sc-select:focus {
  border-color: var(--sc-terre-500);
  box-shadow: var(--sc-shadow-focus);
}
.sc-input::placeholder,
.sc-textarea::placeholder { color: var(--sc-ink-3); }
.sc-textarea { min-height: 80px; resize: vertical; }

/* === LABELS === */
.sc-label {
  font-size: var(--sc-text-xs);
  letter-spacing: var(--sc-tracking-up-2);
  text-transform: uppercase;
  color: var(--sc-ink-3);
  font-weight: 600;
  display: block;
  margin-bottom: var(--sc-s-2);
}

/* === KICKER === */
.sc-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-s-3);
  font-size: var(--sc-text-xs);
  letter-spacing: var(--sc-tracking-up-3);
  text-transform: uppercase;
  color: var(--sc-terre-700);
  font-weight: 500;
}
.sc-kicker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--sc-terre-500);
}
.sc-kicker.no-bar::before { display: none; }

/* === DISPLAY TYPOGRAPHY === */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  letter-spacing: var(--sc-tracking-tight);
  line-height: var(--sc-lh-tight);
  color: var(--sc-terre-900);
}
.sc-display em, .sc-display i { font-style: italic; }

/* === BADGES === */
.sc-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--sc-r-full);
  white-space: nowrap;
}
.sc-badge-success { background: var(--sc-success-bg); color: var(--sc-success); }
.sc-badge-warning { background: var(--sc-warning-bg); color: var(--sc-warning); }
.sc-badge-pending { background: rgba(168, 109, 74, 0.14); color: var(--sc-terre-500); }
.sc-badge-info    { background: var(--sc-info-bg); color: var(--sc-info); }
.sc-badge-ink     { background: var(--sc-ink); color: var(--sc-bg-base); }

/* === DIVIDER === */
.sc-hr {
  height: 1px;
  background: var(--sc-line);
  border: none;
  width: 100%;
  margin: var(--sc-s-8) 0;
}
.sc-hr-short { width: 60px; margin: var(--sc-s-6) 0; background: var(--sc-terre-500); }

/* === LINKS === */
.sc-link {
  color: var(--sc-terre-500);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color var(--sc-t-fast);
}
.sc-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--sc-terre-500);
  transition: width var(--sc-t-base);
}
.sc-link:hover::after { width: 100%; }

/* === AVATAR === */
.sc-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--sc-r-full);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--sc-font-display);
  font-style: italic;
  font-size: var(--sc-text-md);
  color: var(--sc-paper);
  background: linear-gradient(135deg, var(--sc-terre-400), var(--sc-terre-900));
}
.sc-avatar-sm { width: 28px; height: 28px; font-size: var(--sc-text-base); }
.sc-avatar-lg { width: 48px; height: 48px; font-size: var(--sc-text-lg); }

/* === SCROLLBAR === */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--sc-beige-200);
  border-radius: var(--sc-r-full);
  border: 2px solid var(--sc-bg-base);
}
*::-webkit-scrollbar-thumb:hover { background: var(--sc-beige-300); }

/* === SELECTION === */
::selection {
  background: var(--sc-terre-500);
  color: var(--sc-paper);
}

/* === ANIMATIONS === */
@keyframes sc-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sc-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.sc-rise     { animation: sc-rise var(--sc-t-slow) backwards; }
.sc-fade-in  { animation: sc-fade-in var(--sc-t-slow) backwards; }
.sc-scale-in { animation: sc-scale-in var(--sc-t-slow) backwards; }

/* === REVEAL ON SCROLL === */
.sc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--sc-dur-premium) var(--sc-ease-out),
    transform var(--sc-dur-premium) var(--sc-ease-out);
}
.sc-reveal.sc-in { opacity: 1; transform: translateY(0); }

/* === FOCUS RING (a11y) === */
:focus-visible:not(input):not(textarea):not(select) {
  outline: 2px solid var(--sc-terre-500);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}