/* ============================================================
   Magma — component recreations (cosmetic, not production)
   Faithful to projects/stencil/src/components/* styling.
   Requires colors_and_type.css.
   ============================================================ */

/* ---------------- Button (mds-button) ---------------- */
.mds-button{
  --b: var(--variant-primary-04);     /* base channel */
  --bg: rgb(var(--b));
  --fg: rgb(var(--tone-neutral));
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; box-sizing:border-box;
  min-height:36px; min-width:36px; padding:0 16px;
  border:0; border-radius:var(--radius-2xl); corner-shape:squircle;
  background:var(--bg); color:var(--fg); fill:currentColor;
  font-family:var(--font-title); font-size:14px; font-weight:500; line-height:24px;
  cursor:pointer; user-select:none; text-decoration:none;
  box-shadow:0 0 0 2px rgb(var(--b) / 0);
  transition:background-color .2s, box-shadow .2s, color .2s, transform .2s;
}
.mds-button:hover{ background:rgb(var(--variant-primary-03)); }
.mds-button:active{ transform:translateY(1px); }
.mds-button:focus-visible{ outline:2px solid rgb(var(--variant-primary-04)); outline-offset:2px; }
.mds-button .icon{ width:20px; height:20px; flex-shrink:0; }
.mds-button.sm{ min-height:28px; min-width:28px; padding:0 12px; border-radius:var(--radius-md); font-size:13px;}
.mds-button.lg{ min-height:48px; min-width:48px; padding:0 20px; }
.mds-button.xl{ min-height:52px; min-width:52px; padding:0 24px; }
.mds-button.icon-only{ padding:0; aspect-ratio:1; }

/* variants */
.mds-button.secondary{ --b:var(--variant-secondary-04); }
.mds-button.secondary:hover{ background:rgb(var(--variant-secondary-03)); }
.mds-button.ai{ --b:var(--variant-ai-04); }
.mds-button.ai:hover{ background:rgb(var(--variant-ai-03)); }
.mds-button.success{ --b:var(--status-success-03); }
.mds-button.error{ --b:var(--status-error-04); }

/* tones */
.mds-button.weak{ background:rgb(var(--variant-primary-09)); color:rgb(var(--variant-primary-03)); fill:rgb(var(--variant-primary-03)); }
.mds-button.weak:hover{ background:rgb(var(--variant-primary-08)); }
.mds-button.secondary.weak{ background:rgb(var(--variant-secondary-09)); color:rgb(var(--variant-secondary-03)); }
.mds-button.ai.weak{ background:rgb(var(--variant-ai-09)); color:rgb(var(--variant-ai-03)); }
.mds-button.outline{ background:transparent; color:rgb(var(--variant-primary-03)); box-shadow:0 0 0 2px rgb(var(--variant-primary-04) / .35); }
.mds-button.outline:hover{ background:rgb(var(--variant-primary-10)); box-shadow:0 0 0 3px rgb(var(--variant-primary-04) / .6); }
.mds-button.text{ background:transparent; color:rgb(var(--variant-primary-02)); box-shadow:none; }
.mds-button.text:hover{ background:rgb(var(--variant-primary-10)); }
.mds-button.neutral{ --b:var(--tone-neutral-02); }
.mds-button.neutral.weak{ background:rgb(var(--tone-neutral-09)); color:rgb(var(--tone-neutral-02)); }
.mds-button.neutral.weak:hover{ background:rgb(var(--tone-neutral-08)); }
.mds-button[disabled]{ opacity:var(--magma-disabled-opacity); pointer-events:none; }

/* ---------------- Input (mds-input) ---------------- */
.mds-field{ display:flex; flex-direction:column; gap:6px; }
.mds-field > label{ font-family:var(--font-info); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgb(var(--tone-neutral-03)); }
.mds-input{
  display:flex; align-items:center; gap:8px; box-sizing:border-box;
  width:100%; min-height:48px; padding:12px 16px;
  background:rgb(var(--tone-neutral)); color:rgb(var(--tone-neutral-02));
  border:0; border-radius:var(--radius-xl); corner-shape:squircle;
  font-family:var(--font-info); font-size:16px; line-height:24px;
  box-shadow:0 0 0 1px rgb(var(--variant-primary-03) / .12), var(--shadow-sm);
  transition:box-shadow .25s;
}
.mds-input::placeholder{ color:rgb(var(--tone-neutral-06)); }
.mds-input:focus{ outline:none; box-shadow:0 0 0 3px rgb(var(--variant-primary-04)), 0 4px 6px 3px rgb(var(--variant-primary-04) / .1); }
.mds-input.with-icon{ position:relative; }

/* ---------------- Card (mds-card) ---------------- */
.mds-card{
  background:rgb(var(--tone-neutral)); border-radius:var(--radius-xl); corner-shape:squircle;
  box-shadow:var(--shadow-box-md); overflow:hidden;
}
.mds-card .body{ padding:20px 22px; }
.mds-card .head{ padding:18px 22px; border-bottom:1px solid rgb(var(--tone-neutral-09)); }
.mds-card .foot{ padding:14px 22px; border-top:1px solid rgb(var(--tone-neutral-09)); display:flex; gap:10px; justify-content:flex-end; }

/* ---------------- Badge (mds-badge) ---------------- */
/* color axis sets --c (fill) + --cd (dark text); tone axis = strong/weak/outline */
/* zero-specificity defaults so any .c-* color class always wins */
:where(.mds-badge, .mds-chip, .mds-banner){ --c: var(--variant-primary-04); --cd: var(--variant-primary-02); }
.mds-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--radius-full); corner-shape:squircle;
  font-family:var(--font-info); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:16px;
  background:rgb(var(--c) / .14); color:rgb(var(--cd));   /* default = weak */
}
.mds-badge.strong{ background:rgb(var(--c)); color:rgb(var(--tone-neutral)); }
.mds-badge.weak{ background:rgb(var(--c) / .14); color:rgb(var(--cd)); }
.mds-badge.outline{ background:transparent; color:rgb(var(--cd)); box-shadow:inset 0 0 0 1px rgb(var(--c) / .45); }
.mds-badge .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* color modifiers (shared by badge + chip) */
.c-red{ --c:var(--label-red-04); --cd:var(--label-red-02); }
.c-amaranth{ --c:var(--label-amaranth-04); --cd:var(--label-amaranth-02); }
.c-orchid{ --c:var(--label-orchid-04); --cd:var(--label-orchid-02); }
.c-purple{ --c:var(--label-purple-04); --cd:var(--label-purple-02); }
.c-violet{ --c:var(--label-violet-04); --cd:var(--label-violet-02); }
.c-blue{ --c:var(--label-blue-04); --cd:var(--label-blue-02); }
.c-sky{ --c:var(--label-sky-04); --cd:var(--label-sky-02); }
.c-aqua{ --c:var(--label-aqua-04); --cd:var(--label-aqua-02); }
.c-green{ --c:var(--label-green-04); --cd:var(--label-green-02); }
.c-lime{ --c:var(--label-lime-03); --cd:var(--label-lime-02); }
.c-yellow{ --c:var(--label-yellow-03); --cd:var(--label-yellow-01); }
.c-orange{ --c:var(--label-orange-04); --cd:var(--label-orange-02); }
.c-info{ --c:var(--status-info-04); --cd:var(--status-info-02); }
.c-success{ --c:var(--status-success-03); --cd:var(--status-success-02); }
.c-warning{ --c:var(--status-warning-03); --cd:var(--status-warning-01); }
.c-error{ --c:var(--status-error-04); --cd:var(--status-error-02); }
.c-ai{ --c:var(--variant-ai-04); --cd:var(--variant-ai-02); }
.c-primary{ --c:var(--variant-primary-04); --cd:var(--variant-primary-02); }
.c-secondary{ --c:var(--variant-secondary-04); --cd:var(--variant-secondary-02); }
.c-dark{ --c:var(--tone-neutral-02); --cd:var(--tone-neutral-01); }
.c-neutral{ --c:var(--tone-neutral-05); --cd:var(--tone-neutral-03); }

/* ---------------- Chip (mds-chip) ---------------- */
/* white pill + leading avatar + label + circular close. tone = strong/weak avatar fill */
.mds-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 6px 4px 5px; border-radius:var(--radius-full); corner-shape:round;
  background:rgb(var(--tone-neutral)); color:rgb(var(--tone-neutral-02));
  box-shadow:inset 0 0 0 1px rgb(var(--tone-neutral-09)), var(--shadow-xs);
  font-family:var(--font-info); font-size:14px; font-weight:500; line-height:20px;
}
.mds-chip .avatar{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-title); font-weight:700; font-size:11px; }
.mds-chip .avatar svg{ width:16px; height:16px; fill:currentColor; }
.mds-chip.strong .avatar{ background:rgb(var(--c)); color:rgb(var(--tone-neutral)); }
.mds-chip.weak .avatar{ background:rgb(var(--c) / .16); color:rgb(var(--c)); }
.mds-chip .lbl{ padding:0 2px; white-space:nowrap; }
.mds-chip .close{ width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; background:rgb(var(--tone-neutral-09)); color:rgb(var(--tone-neutral-04)); cursor:pointer; }
.mds-chip .close .mds-x{ width:13px; height:13px; }
.mds-chip .close:hover{ background:rgb(var(--tone-neutral-08)); color:rgb(var(--tone-neutral-02)); }

/* ---------------- Banner (mds-banner) ---------------- */
/* card with optional left "cockade" (coccarda) icon ribbon, title, close, body, actions.
   color axis via .c-* (sets --c/--cd); tone axis = strong / weak / box. */
.mds-banner{
  display:flex; gap:0; align-items:flex-start; overflow:hidden;
  background:rgb(var(--tone-neutral));
  border-radius:var(--radius-xl); corner-shape:squircle;
  font-family:var(--font-info);
}
.mds-banner.strong{ background:rgb(var(--c) / .10); }
.mds-banner.weak{ box-shadow:inset 0 0 0 1px rgb(var(--tone-neutral-09)); }
.mds-banner.box{ box-shadow:var(--shadow-box-md); }
.mds-banner .cockade{
  flex-shrink:0; align-self:flex-start; display:flex;
  padding:16px 13px 18px;
  background:rgb(var(--c) / .14);
  border-bottom-right-radius:var(--radius-lg); corner-shape:squircle;
}
.mds-banner .cockade .ico{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgb(var(--c)); color:rgb(var(--tone-neutral));
}
.mds-banner .cockade .ico svg{ width:20px; height:20px; fill:currentColor; }
.mds-banner.no-cockade .cockade{ display:none; }
/* bare icon — no cockade tab / no circle, just the colored glyph */
.mds-banner .lead-icon{ flex-shrink:0; align-self:flex-start; padding:18px 0 0 20px; color:rgb(var(--c)); display:inline-flex; }
.mds-banner .lead-icon svg{ width:26px; height:26px; fill:currentColor; }
.mds-banner .lead-icon + .content{ padding-left:14px; }
.mds-banner.mini .lead-icon{ padding:13px 0 0 14px; }
.mds-banner.mini .lead-icon svg{ width:22px; height:22px; }
.mds-banner.mini .lead-icon + .content{ padding-left:10px; }
.mds-banner .content{ flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.mds-banner.no-cockade .content{ padding-left:20px; }
.mds-banner .head{ display:flex; align-items:flex-start; gap:12px; }
.mds-banner .title{ flex:1; font-family:var(--font-title); font-weight:900; font-size:18px; line-height:1.25; color:rgb(var(--cd)); }
.mds-banner .close{ flex-shrink:0; cursor:pointer; color:rgb(var(--cd)); display:inline-flex; }
.mds-banner .close svg{ width:20px; height:20px; fill:currentColor; }
.mds-banner .body{ margin:0; font-size:15px; line-height:1.5; color:rgb(var(--tone-neutral-02)); }
.mds-banner .actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

/* close glyph (× drawn in CSS — no plain close icon in the SVG set) */
.mds-x{ position:relative; display:inline-block; width:20px; height:20px; }
.mds-x::before, .mds-x::after{ content:''; position:absolute; left:50%; top:50%; width:64%; height:2px; background:currentColor; border-radius:2px; }
.mds-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.mds-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------------- Icon helper ---------------- */
/* Inline-SVG icons (recolor via `color`). Hydrated by assets/magma-icons.js
   using a [data-icon="name"] attribute. */
.mds-icon{ display:inline-flex; width:24px; height:24px; flex-shrink:0; }
.mds-icon svg{ width:100%; height:100%; fill:currentColor; }