/* Crewnet Current + approved SoftFrame, 2026-10-31.
   Reusable baseline, not a requirement that every product use every component.
   Exact Figma avatar SVG mask included; ordinary CSS radius is a fallback. */
:root {
  --sf-bg: #f6f4ee;
  --sf-ink: #29342d;
  --sf-muted: #626a63;
  --sf-line: #d8dcd3;
  --sf-surface: #fefdf9;
  --sf-nav: #eeefe9;
  --sf-button: #e6eae1;
  --sf-film-ink: #3f4a42;
  --sf-sage: #a8b5a2;
  --sf-blue: #a8b7c1;
  --sf-rose: #c7afad;
  --sf-sand: #c5bba8;
  --sf-lilac: #b5aec3;
  --sf-olive: #b7c0ad;
  --sf-clay: #bca693;
  --sf-teal: #a2b6b4;
  --sf-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --sf-title-size: 24px;
  --sf-title-leading: 30px;
  --sf-heading-size: 20px;
  --sf-heading-leading: 26px;
  --sf-body-size: 16px;
  --sf-body-leading: 24px;
  --sf-label-size: 14px;
  --sf-label-leading: 20px;
  --sf-caption-size: 12px;
  --sf-caption-leading: 18px;
  --sf-weight-regular: 400;
  --sf-weight-medium: 500;
  --sf-weight-semibold: 600;
  --sf-title-tracking: -0.5px;
  --sf-space-4: 4px;
  --sf-space-8: 8px;
  --sf-space-12: 12px;
  --sf-space-16: 16px;
  --sf-space-20: 20px;
  --sf-space-24: 24px;
  --sf-space-32: 32px;
  --sf-line-width: 1px;
  --sf-hit-min: 44px;
  --sf-header-height: 72px;
  --sf-nav-dot-size: 4px;
  --sf-control-radius: 8px;
  --sf-panel-radius: 24px;
  --shape-avatar-large-radius: 24px;
  --shape-avatar-medium-radius: 17px;
  --shape-avatar-small-radius: 12px;
  --shape-department-badge-radius: 6px;
  --shape-project-shell-radius: 24px;
  --shape-media-frame-radius: 12px;
  --shape-edge-slot-radius: 3px;
  --shape-edge-slot-master-pitch: 26px;
  --shape-edge-slot-master-width: 3px;
  --shape-edge-slot-master-height: 8px;
  --shape-edge-slot-opacity: .24;
  --shape-project-master-width: 286px;
  --shape-figma-corner-smoothing: .6;
  --sf-avatar-large: 96px;
  --sf-avatar-medium: 68px;
  --sf-avatar-small: 48px;
  --sf-badge-large: 26px;
  --sf-badge-medium: 22px;
  --sf-badge-small: 18px;
  --sf-glyph-large: 18px;
  --sf-glyph-medium: 15px;
  --sf-glyph-small: 12px;
  /* Existing runtime sample; products may tune duration for their task. */
  --sf-motion-avatar: 280ms;
  --sf-motion-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Small reusable geometry samples; intentionally no app routes or data. */
.sf-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size, var(--sf-avatar-large));
  height: var(--avatar-size, var(--sf-avatar-large));
  background: transparent;
  color: var(--sf-ink);
  border-radius: var(--avatar-radius, var(--shape-avatar-large-radius));
  font-family: var(--sf-font);
}
.sf-avatar[data-size="68"] {
  --avatar-size: var(--sf-avatar-medium);
  --avatar-radius: var(--shape-avatar-medium-radius);
  --badge-size: var(--sf-badge-medium);
  --glyph-size: var(--sf-glyph-medium);
}
.sf-avatar[data-size="48"] {
  --avatar-size: var(--sf-avatar-small);
  --avatar-radius: var(--shape-avatar-small-radius);
  --badge-size: var(--sf-badge-small);
  --glyph-size: var(--sf-glyph-small);
}
.sf-avatar > .sf-photo {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
}
.sf-badge {
  position: absolute; right: 0; bottom: 0;
  display: grid; place-items: center;
  width: var(--badge-size, var(--sf-badge-large));
  height: var(--badge-size, var(--sf-badge-large));
  border-radius: var(--shape-department-badge-radius);
  background: var(--sf-surface);
  transform: rotate(0deg);
}
.sf-badge > img {
  width: var(--glyph-size, var(--sf-glyph-large));
  height: var(--glyph-size, var(--sf-glyph-large));
  object-fit: contain;
}
.sf-media { width: 100%; object-fit: cover; border-radius: var(--shape-media-frame-radius); }
.sf-focus:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sf-avatar { transition: none; animation: none; }
}

/* The mask belongs to the inner surface; keep the badge outside its clipping. */
.sf-avatar::before {
  content: ""; position: absolute; inset: 0;
  background: var(--identity-color, var(--sf-sage));
  border-radius: inherit;
}
.sf-avatar > span:not(.sf-badge) { position: relative; z-index: 1; }
.sf-badge { z-index: 2; }
@supports (mask-image: url("../assets/softframe-avatar-mask.svg")) {
  .sf-avatar::before, .sf-avatar > .sf-photo {
    border-radius: 0;
    mask-image: url("../assets/softframe-avatar-mask.svg");
    mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: alpha;
  }
}