/* Maestro Design System (bundle concatenado em 04/09/2026 a partir de project/styles.css) */

/* ===== tokens/base.css ===== */
/* ============================================================
   Maestro — Base element defaults
   Minimal resets + brand defaults wired to tokens. Optional for
   consumers, but makes raw HTML look on-brand out of the box.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-weight: var(--weight-heavy); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--accent-soft-2); color: var(--text-strong); }

/* Eyebrow / overline helper */
.eyebrow {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ===== tokens/colors.css ===== */
/* ============================================================
   Maestro — Color tokens
   Black & white system: a true grayscale neutral ramp, with
   EMERALD GREEN as the single accent. Light = white paper,
   dark = near-black. Emerald is the only chromatic colour.
   ============================================================ */

:root {
  /* ---- Brand: Emerald (the single accent — CTAs, focus, emphasis) ---- */
  --emerald-50:  #E7F4EE;
  --emerald-100: #C6E7D7;
  --emerald-200: #95D3B5;
  --emerald-300: #5DBC90;
  --emerald-400: #2BA572;
  --emerald-500: #0E9D6E;   /* pure emerald */
  --emerald-600: #0B855D;   /* core accent — white text rides on it */
  --emerald-700: #086A4A;   /* hover / active */
  --emerald-800: #065238;
  --emerald-900: #043B29;

  /* ---- Gray: true neutral ramp (white paper → near-black ink) ---- */
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;   /* app background */
  --gray-200: #E7E7E9;
  --gray-300: #D6D6D9;   /* hairline borders */
  --gray-400: #A6A6AB;
  --gray-500: #79797F;
  --gray-600: #57575C;   /* muted text */
  --gray-700: #3A3A3E;
  --gray-800: #232325;
  --gray-900: #121214;   /* near-black ink */

  /* ---- Ink: near-black surfaces (footers, dark mode) ---- */
  --ink-700: #1C1C1F;
  --ink-800: #161618;
  --ink-900: #0E0E10;
  --ink-950: #08080A;

  /* ---- Monochrome support shades (decorative panels / categories) ---- */
  --cobalt:  #2E2E31;   /* charcoal panel */
  --amber:   #0E9D6E;   /* emerald highlight */
  --cypress: #161618;   /* near-black */
  --teal:    #3A3A3E;   /* mid charcoal */
  --indigo:  #232325;   /* dark gray */

  /* ---- Semantic hues (kept monochrome + emerald only) ---- */
  --green-500:  #0E9D6E;
  --green-50:   #E7F4EE;
  --amber-500:  #3A3A3E;
  --amber-50:   #EDEDEF;
  --red-500:    #1C1C1F;
  --red-50:     #E7E7E9;
  --teal-500:   #0B855D;
  --teal-50:    #E7F4EE;

  /* ============================================================
     SEMANTIC ALIASES — light theme (default)
     ============================================================ */
  --bg-app:        var(--gray-100);   /* page background */
  --bg-subtle:     var(--gray-200);   /* recessed sections */
  --surface:       #FFFFFF;           /* cards, sheets */
  --surface-2:     var(--gray-50);    /* nested / muted surface */
  --surface-inset: var(--gray-100);   /* inputs, wells */

  --text-strong:   var(--gray-900);   /* headings */
  --text-body:     #2A2A2D;           /* paragraphs */
  --text-muted:    var(--gray-600);   /* secondary */
  --text-faint:    var(--gray-500);   /* captions, placeholder */
  --text-on-accent:#FFFFFF;           /* white ON the emerald accent */
  --text-inverse:  var(--gray-50);

  --border:        var(--gray-300);   /* default hairline */
  --border-strong: var(--gray-400);
  --border-faint:  var(--gray-200);
  --ring:          var(--emerald-300);

  --accent:        var(--emerald-600);
  --accent-hover:  var(--emerald-700);
  --accent-active: var(--emerald-800);
  --accent-soft:   var(--emerald-50);
  --accent-soft-2: var(--emerald-100);
  --accent-text:   var(--emerald-700);   /* emerald text on light */

  --success:       var(--emerald-600);
  --success-soft:  var(--emerald-50);
  --warning:       var(--gray-700);
  --warning-soft:  var(--gray-200);
  --danger:        var(--ink-700);
  --danger-soft:   var(--gray-200);
  --info:          var(--emerald-700);
  --info-soft:     var(--emerald-50);

  --overlay:       rgba(8, 8, 10, 0.52);   /* scrim behind modals */
  color-scheme: light;
}

/* ============================================================
   DARK THEME — near-black with emerald
   Apply with <html data-theme="dark"> or .dark
   ============================================================ */
:root[data-theme="dark"],
.dark {
  --bg-app:        var(--ink-950);
  --bg-subtle:     #050507;
  --surface:       var(--ink-900);
  --surface-2:     var(--ink-800);
  --surface-inset: var(--ink-950);

  --text-strong:   #F4F4F5;
  --text-body:     #D6D6D9;
  --text-muted:    #8A8A90;
  --text-faint:    #5F5F65;
  --text-on-accent:#06231A;
  --text-inverse:  var(--gray-900);

  --border:        #2A2A2D;
  --border-strong: #3A3A3E;
  --border-faint:  #1E1E21;
  --ring:          var(--emerald-400);

  --accent:        #16B981;   /* brighter emerald on near-black */
  --accent-hover:  #2ECC92;
  --accent-active: #0E9D6E;
  --accent-soft:   rgba(22, 185, 129, 0.14);
  --accent-soft-2: rgba(22, 185, 129, 0.22);
  --accent-text:   #2ECC92;

  --success:       #16B981;
  --success-soft:  rgba(22, 185, 129, 0.16);
  --warning:       #A6A6AB;
  --warning-soft:  rgba(166, 166, 171, 0.16);
  --danger:        #C9C9CE;
  --danger-soft:   rgba(201, 201, 206, 0.14);
  --info:          #2ECC92;
  --info-soft:     rgba(22, 185, 129, 0.16);

  --overlay:       rgba(2, 2, 4, 0.68);
  color-scheme: dark;
}

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Maestro — Webfonts
   Text/Display: Libre Franklin  (classic Franklin Gothic grotesque —
                 standard, neutral, professional; heavy weights for titles)
   Mono:         IBM Plex Mono   (technical labels, code)
   ------------------------------------------------------------
   Loaded from Google Fonts so previews render anywhere. For
   production / offline, self-host the woff2 files and replace
   these @import lines with local @font-face rules.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300..900;1,400..600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ===== tokens/motion.css ===== */
/* ============================================================
   Maestro — Motion tokens
   Quick, confident, no bounce. Calm fades & short slides.
   ============================================================ */

:root {
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */
  --dur-slower: 520ms;   /* @kind other */

  /* Easing — settled, slightly eased-out. No elastic / overshoot. */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.30, 1);   /* @kind other */
  --ease-emph:   cubic-bezier(0.20, 0.80, 0.25, 1);   /* @kind other */

  --transition-colors: color var(--dur-base) var(--ease-out),
                       background-color var(--dur-base) var(--ease-out),
                       border-color var(--dur-base) var(--ease-out);   /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;   /* @kind other */
    --dur-base: 0ms;   /* @kind other */
    --dur-slow: 0ms;   /* @kind other */
    --dur-slower: 0ms; /* @kind other */
  }
}

/* ===== tokens/radius.css ===== */
/* ============================================================
   Maestro — Radius tokens
   Moderate rounding — friendly, never bubbly.
   ============================================================ */

:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default: buttons, inputs, tags */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   22px;   /* feature panels, media */
  --radius-2xl:  32px;   /* hero blocks */
  --radius-full: 999px;  /* pills, avatars */
}

/* ===== tokens/shadows.css ===== */
/* ============================================================
   Maestro — Elevation & effects
   Warm, brown-tinted shadows. Soft and low-contrast — premium,
   never harsh. Borders do most of the separation work.
   ============================================================ */

:root {
  --shadow-xs:  0 1px 2px rgba(18, 18, 20, 0.06);
  --shadow-sm:  0 1px 3px rgba(18, 18, 20, 0.09), 0 1px 2px rgba(18, 18, 20, 0.05);
  --shadow-md:  0 6px 16px -6px rgba(18, 18, 20, 0.14), 0 2px 6px -2px rgba(18, 18, 20, 0.08);
  --shadow-lg:  0 18px 40px -16px rgba(18, 18, 20, 0.20), 0 6px 14px -8px rgba(18, 18, 20, 0.12);
  --shadow-xl:  0 32px 64px -24px rgba(18, 18, 20, 0.26), 0 10px 24px -12px rgba(18, 18, 20, 0.14);

  /* Warm focus ring for inputs / keyboard nav */
  --ring-width: 3px;
  --ring-shadow: 0 0 0 var(--ring-width) var(--accent-soft-2);
  --ring-shadow-strong: 0 0 0 var(--ring-width) rgba(14, 157, 110, 0.40);

  /* Frosted overlay blur (sticky nav, sheets) */
  --blur: saturate(140%) blur(14px);   /* @kind other */
}

:root[data-theme="dark"],
.dark {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.46), 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-md:  0 6px 16px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 18px 40px -16px rgba(0, 0, 0, 0.62), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 32px 64px -24px rgba(0, 0, 0, 0.70), 0 10px 24px -12px rgba(0, 0, 0, 0.50);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Maestro — Spacing & layout tokens
   4px base unit. Generous section rhythm (lots of breathing room).
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* Section vertical rhythm — mobile-first, opens up on desktop */
  --section-y:       clamp(3.5rem, calc(2.5rem + 5vw), 7rem);    /* @kind spacing */
  --section-y-tight: clamp(2.5rem, calc(2rem + 3vw), 4.5rem);    /* @kind spacing */

  /* Content widths */
  --container:    1200px;   /* marketing max width */
  --container-md: 960px;
  --measure:      68ch;     /* readable prose line length */
  --gutter:       clamp(1.25rem, calc(0.8rem + 2.2vw), 2.5rem);  /* @kind spacing */
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Maestro — Typography tokens
   Heavy display titles, calm legible body, generous rhythm.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* ---- Fluid type scale (mobile-first; clamps up on wide) ---- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   clamp(1.4rem, calc(1.2rem + 0.9vw), 1.6rem);
  --text-2xl:  clamp(1.7rem, calc(1.4rem + 1.4vw), 2.1rem);
  --text-3xl:  clamp(2.1rem, calc(1.6rem + 2.3vw), 2.9rem);
  --text-4xl:  clamp(2.6rem, calc(1.9rem + 3.4vw), 3.9rem);
  --text-5xl:  clamp(3.1rem, calc(2.1rem + 5vw), 5.2rem);

  /* ---- Line heights ---- */
  --leading-tight:   1.04;   /* big display */
  --leading-snug:    1.16;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;   /* display */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;    /* eyebrow / overline */

  /* ---- Semantic roles ---- */
  --display-family: var(--font-display);
  --display-weight: var(--weight-heavy);
  --heading-family: var(--font-display);
  --heading-weight: var(--weight-bold);
  --body-family:    var(--font-text);
  --eyebrow-tracking: var(--tracking-caps);
}

/* ===== components/components.css ===== */
/* ============================================================
   Maestro — Component styles
   Class-based, token-driven. Shipped via styles.css so consumers
   get real hover / focus / active states. Prefix: mds-
   ============================================================ */

/* ---------------- Button ---------------- */
.mds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-text); font-weight: var(--weight-semibold);
  line-height: 1; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--accent); color: var(--text-on-accent); cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  user-select: none;
}
.mds-btn:hover { background: var(--accent-hover); }
.mds-btn:active { transform: translateY(1px); }
.mds-btn:focus-visible { outline: none; box-shadow: var(--ring-shadow-strong); }
.mds-btn[disabled], .mds-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none;
}
/* sizes */
.mds-btn--sm { font-size: var(--text-sm); padding: 0.5rem 0.85rem; }
.mds-btn--md { font-size: var(--text-base); padding: 0.7rem 1.15rem; }
.mds-btn--lg { font-size: var(--text-md); padding: 0.9rem 1.5rem; border-radius: var(--radius-lg); }
.mds-btn--block { display: flex; width: 100%; }
/* variants */
.mds-btn--primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-sm); }
.mds-btn--primary:hover { background: var(--accent-hover); }
.mds-btn--primary:active { background: var(--accent-active); }

.mds-btn--secondary {
  background: var(--surface); color: var(--text-strong); border-color: var(--border-strong);
}
.mds-btn--secondary:hover { background: var(--surface-2); border-color: var(--gray-500); }
.mds-btn--secondary:active { background: var(--gray-100); }

.mds-btn--ghost { background: transparent; color: var(--text-strong); }
.mds-btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); }
.mds-btn--ghost:active { background: var(--accent-soft-2); }

.mds-btn--subtle { background: var(--accent-soft); color: var(--accent-text); }
.mds-btn--subtle:hover { background: var(--accent-soft-2); }

.mds-btn--danger { background: var(--danger); color: #fff; }
.mds-btn--danger:hover { filter: brightness(0.94); }

.mds-btn__spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: mds-spin 0.6s linear infinite;
}
@keyframes mds-spin { to { transform: rotate(360deg); } }

/* ---------------- Icon button ---------------- */
.mds-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--dur-base) var(--ease-out);
}
.mds-iconbtn:hover { background: var(--accent-soft); color: var(--accent-text); }
.mds-iconbtn:active { background: var(--accent-soft-2); }
.mds-iconbtn:focus-visible { outline: none; box-shadow: var(--ring-shadow-strong); }
.mds-iconbtn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.mds-iconbtn--sm { width: 32px; height: 32px; }
.mds-iconbtn--md { width: 40px; height: 40px; }
.mds-iconbtn--lg { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.mds-iconbtn--solid { background: var(--surface); border-color: var(--border); color: var(--text-strong); }
.mds-iconbtn--solid:hover { background: var(--surface-2); }

/* ---------------- Input / Textarea ---------------- */
.mds-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mds-field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.mds-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.mds-field__hint--error { color: var(--danger); }

.mds-input {
  font-family: var(--font-text); font-size: var(--text-base); color: var(--text-strong);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mds-input::placeholder { color: var(--text-faint); }
.mds-input:hover { border-color: var(--gray-500); }
.mds-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-shadow); }
.mds-input[aria-invalid="true"] { border-color: var(--danger); }
.mds-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 var(--ring-width) var(--danger-soft); }
.mds-input[disabled] { background: var(--surface-inset); color: var(--text-faint); cursor: not-allowed; }
textarea.mds-input { resize: vertical; min-height: 88px; line-height: 1.5; }

.mds-input-wrap { position: relative; display: flex; align-items: center; }
.mds-input-wrap .mds-input { padding-left: 2.5rem; }
.mds-input-wrap__icon {
  position: absolute; left: 0.85rem; display: inline-flex; color: var(--text-faint); pointer-events: none;
}

/* ---------------- Select ---------------- */
.mds-select {
  font-family: var(--font-text); font-size: var(--text-base); color: var(--text-strong);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2382705D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0.7rem 2.4rem 0.7rem 0.9rem; width: 100%; appearance: none; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.mds-select:hover { border-color: var(--gray-500); }
.mds-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-shadow); }

/* ---------------- Checkbox ---------------- */
.mds-check { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--text-base); color: var(--text-body); }
.mds-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mds-check__box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-accent); transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-out); flex: none;
}
.mds-check__box svg { opacity: 0; transform: scale(0.6); transition: all var(--dur-fast) var(--ease-out); }
.mds-check input:checked + .mds-check__box { background: var(--accent); border-color: var(--accent); }
.mds-check input:checked + .mds-check__box svg { opacity: 1; transform: scale(1); }
.mds-check input:focus-visible + .mds-check__box { box-shadow: var(--ring-shadow-strong); }
.mds-check:hover .mds-check__box { border-color: var(--accent); }

/* ---------------- Switch ---------------- */
.mds-switch { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; }
.mds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mds-switch__track {
  width: 44px; height: 26px; border-radius: 999px; background: var(--gray-400);
  position: relative; transition: background-color var(--dur-base) var(--ease-out); flex: none;
}
.mds-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-emph);
}
.mds-switch input:checked + .mds-switch__track { background: var(--accent); }
.mds-switch input:checked + .mds-switch__track .mds-switch__thumb { transform: translateX(18px); }
.mds-switch input:focus-visible + .mds-switch__track { box-shadow: var(--ring-shadow-strong); }

/* ---------------- Badge ---------------- */
.mds-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-text); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1; padding: 0.35em 0.65em; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-text);
}
.mds-badge--neutral { background: var(--gray-200); color: var(--text-muted); }
.mds-badge--success { background: var(--success-soft); color: var(--success); }
.mds-badge--warning { background: var(--warning-soft); color: #8a5e1e; }
.mds-badge--danger  { background: var(--danger-soft); color: var(--danger); }
.mds-badge--info    { background: var(--info-soft); color: var(--info); }
.mds-badge--solid   { background: var(--accent); color: var(--text-on-accent); }
.mds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------- Tag (removable / selectable chip) ---------------- */
.mds-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-text); font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 0.4em 0.8em; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-body);
  cursor: default; transition: var(--transition-colors);
}
.mds-tag--selectable { cursor: pointer; }
.mds-tag--selectable:hover { border-color: var(--accent); color: var(--accent-text); }
.mds-tag--active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.mds-tag__x { display: inline-flex; cursor: pointer; opacity: 0.6; border-radius: 50%; }
.mds-tag__x:hover { opacity: 1; }

/* ---------------- Avatar ---------------- */
.mds-avatar {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; background: var(--gray-300); color: var(--gray-700);
  font-family: var(--font-display); font-weight: var(--weight-bold); flex: none;
  border: 2px solid var(--surface);
}
.mds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.mds-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.mds-avatar--md { width: 40px; height: 40px; font-size: 15px; }
.mds-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.mds-avatar--accent { background: var(--accent-soft-2); color: var(--accent-text); }
.mds-avatar-group { display: inline-flex; }
.mds-avatar-group .mds-avatar + .mds-avatar { margin-left: -10px; }

/* ---------------- Card ---------------- */
.mds-card {
  background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.mds-card--pad { padding: var(--space-6); }
.mds-card--interactive { cursor: pointer; }
.mds-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border); transform: translateY(-2px); }
.mds-card--flat { box-shadow: none; border-color: var(--border); }
.mds-card--accent { border-color: var(--accent-soft-2); box-shadow: 0 0 0 1px var(--accent-soft-2), var(--shadow-md); }

/* ---------------- Tabs ---------------- */
.mds-tabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; background: var(--surface-inset); border-radius: var(--radius-lg); }
.mds-tab {
  font-family: var(--font-text); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  padding: 0.55rem 1rem; border-radius: var(--radius-md); border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: var(--transition-colors), box-shadow var(--dur-base) var(--ease-out);
}
.mds-tab:hover { color: var(--text-strong); }
.mds-tab--active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* ---------------- Alert / Callout ---------------- */
.mds-alert {
  display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border-radius: var(--radius-md);
  background: var(--accent-soft); border: 1px solid transparent; color: var(--text-body);
}
.mds-alert__icon { color: var(--accent); flex: none; margin-top: 1px; }
.mds-alert__title { font-weight: var(--weight-bold); color: var(--text-strong); font-family: var(--font-display); margin-bottom: 2px; }
.mds-alert__body { font-size: var(--text-sm); color: var(--text-body); }
.mds-alert--info { background: var(--info-soft); }
.mds-alert--info .mds-alert__icon { color: var(--info); }
.mds-alert--success { background: var(--success-soft); }
.mds-alert--success .mds-alert__icon { color: var(--success); }
.mds-alert--warning { background: var(--warning-soft); }
.mds-alert--warning .mds-alert__icon { color: #8a5e1e; }
.mds-alert--danger { background: var(--danger-soft); }
.mds-alert--danger .mds-alert__icon { color: var(--danger); }