/* ============================================================
   HERBASSADOR — DESIGN TOKENS v2
   Import FIRST on every page. Now includes animation tokens,
   elevated shadows, surface variants, and transition easings.
   ============================================================ */

:root {

  /* ── PURPLE SCALE ── */
  --purple-900: #1a0533;
  --purple-800: #2d0a57;
  --purple-700: #450f80;
  --purple-600: #5c17a8;
  --purple-500: #7b2fd4;
  --purple-400: #9d57e0;
  --purple-300: #bc8eec;
  --purple-200: #d9bef5;
  --purple-100: #efe5fb;
  --purple-50:  #f9f4fe;

  /* ── BRAND SEMANTIC ── */
  --color-brand:         var(--purple-600);
  --color-brand-dark:    var(--purple-700);
  --color-brand-darker:  var(--purple-800);
  --color-brand-light:   var(--purple-400);
  --color-brand-lighter: var(--purple-200);
  --color-brand-faint:   var(--purple-100);
  --color-brand-whisper: var(--purple-50);

  /* ── SURFACES ── */
  --color-bg:             #ffffff;
  --color-bg-subtle:      var(--purple-50);
  --color-bg-muted:       var(--purple-100);
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-overlay:        var(--purple-900);

  /* ── TEXT ── */
  --color-text:         #1a1a2e;
  --color-text-muted:   #5a5a7a;
  --color-text-faint:   #9999bb;
  --color-text-inverse: #ffffff;
  --color-text-brand:   var(--purple-600);

  /* ── BORDERS ── */
  --color-border:       var(--purple-200);
  --color-border-strong:var(--purple-300);
  --color-border-focus: var(--purple-500);

  /* ── STATES ── */
  --color-success:     #1a8a4a;
  --color-success-bg:  #e6f7ee;
  --color-warning:     #b45309;
  --color-warning-bg:  #fef3c7;
  --color-danger:      #c0392b;
  --color-danger-bg:   #fdecea;
  --color-info:        var(--purple-600);
  --color-info-bg:     var(--purple-100);

  /* ── BUTTON TOKENS ── */
  --btn-primary-bg:         var(--color-brand);
  --btn-primary-bg-hover:   var(--color-brand-dark);
  --btn-primary-text:       #ffffff;
  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--color-brand-faint);
  --btn-secondary-border:   var(--color-brand);
  --btn-secondary-text:     var(--color-brand);
  --btn-ghost-bg:           transparent;
  --btn-ghost-bg-hover:     var(--color-brand-faint);
  --btn-ghost-text:         var(--color-brand);
  --btn-danger-bg:          var(--color-danger);
  --btn-danger-bg-hover:    #a93226;
  --btn-danger-text:        #ffffff;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── SPACING ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── BORDER RADIUS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── SHADOWS — v2: deeper, more brand-tinted ── */
  --shadow-xs: 0 1px 3px rgba(93,23,168,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(93,23,168,.10), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(93,23,168,.14), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(93,23,168,.18), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl: 0 16px 48px rgba(93,23,168,.22), 0 8px 20px rgba(0,0,0,.10);
  /* Glow used on active states / focused cards */
  --shadow-glow: 0 0 0 3px rgba(92,23,168,.18);

  /* ── LAYOUT ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --sidebar-width:    260px;
  --topbar-height:    64px;
  --bottombar-height: 64px;

  /* ── TRANSITIONS — v2: spring easings ── */
  --ease-out-quart: cubic-bezier(.25,.46,.45,.94);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);   /* slight overshoot */
  --ease-in-out:    cubic-bezier(.4,0,.2,1);

  --transition-fast: 150ms var(--ease-out-quart);
  --transition-base: 250ms var(--ease-out-quart);
  --transition-slow: 400ms var(--ease-out-quart);

  /* ── Z-INDEX ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: var(--text-base);
  font-weight: var(--weight-regular); line-height: var(--leading-normal);
  color: var(--color-text); background: var(--color-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  line-height: var(--leading-tight); color: var(--color-text);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  }
h6 { font-size: var(--text-base);}
a  { color: var(--color-text-brand); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-brand-dark); }
img,svg { display: block; max-width: 100%; }
input,textarea,select,button { font-family: inherit; font-size: inherit; }

/* ── GLOBAL UTILITY CLASSES ── */
.text-brand    { color: var(--color-brand); }
.text-muted    { color: var(--color-text-muted); }
.text-faint    { color: var(--color-text-faint); }
.text-inverse  { color: var(--color-text-inverse); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-warning  { color: var(--color-warning); }
.bg-brand      { background: var(--color-brand); }
.bg-subtle     { background: var(--color-bg-subtle); }
.bg-surface    { background: var(--color-surface); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── BUTTON COMPONENT ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); cursor: pointer; border: 2px solid transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: none !important; }

.btn-primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text); box-shadow: 0 4px 18px rgba(92,23,168,.35);
}
.btn-secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); box-shadow: var(--shadow-sm); }
.btn-ghost {
  background: var(--btn-ghost-bg); color: var(--btn-ghost-text); border-color: transparent;
}
.btn-ghost:hover { background: var(--btn-ghost-bg-hover); }
.btn-danger {
  background: var(--btn-danger-bg); color: var(--btn-danger-text); border-color: var(--btn-danger-bg);
}
.btn-danger:hover { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-bg-hover); }
.btn-sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn-lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-full { width: 100%; }
.btn .spinner { width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CARD ── */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-muted  { background: var(--color-bg-muted); border-color: transparent; }
.card-brand  { background: var(--color-brand); color: #fff; border-color: transparent; }

/* ── BADGE ── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap;
}
.badge-brand   { background: var(--color-brand-faint); color: var(--color-brand); }
.badge-success { background: var(--color-success-bg);  color: var(--color-success); }
.badge-danger  { background: var(--color-danger-bg);   color: var(--color-danger); }
.badge-warning { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge-muted   { background: var(--purple-100);        color: var(--color-text-muted); }

/* ── INPUT ── */
.input {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  font-size: var(--text-base); color: var(--color-text); background: var(--color-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.input::placeholder { color: var(--color-text-faint); }
.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-glow);
}
.input-error { border-color: var(--color-danger); }
.input-error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.14); }

/* ── LABEL ── */
.label {
  display: block; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-text); margin-bottom: var(--space-2);
}

/* ── DIVIDER ── */
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

/* ── ALERT ── */
.alert {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  font-size: var(--text-sm); border-left: 4px solid; display: none;
}
.alert.show, .alert[style*="display:flex"], .alert[style*="display: flex"] { display: flex; }
.alert-info    { background: var(--color-info-bg);    color: var(--color-brand-darker); border-color: var(--color-brand); }
.alert-success { background: var(--color-success-bg); color: var(--color-success);      border-color: var(--color-success); display: flex; }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger);       border-color: var(--color-danger); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning);      border-color: var(--color-warning); }

/* ── STAT CARD ── */
.stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.stat-card__label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.stat-card__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-brand); }
.stat-card__sub   { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }

/* ── CONTAINERS ── */
.container    { width:100%; max-width:var(--container-xl); margin:0 auto; padding:0 var(--space-6); }
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }