osi-cards-lib 1.0.0

package/styles/components/sections/_section-types.scss

@@ -0,0 +1,290 @@
+@import 'sections/sections-base';
+@import 'unified-cards';
+
+/**
+ * Section Type System
+ * ---------------------------------------------------------------------------
+ * All sections share a common base structure defined here. Each type sets a
+ * palette via CSS variables so that light and dark themes stay in sync while
+ * preserving individual personalities.
+ */
+
+$section-base-shadow: 0 18px 40px color-mix(in srgb, var(--foreground) 8%, transparent);
+
+.section-block {
+  --section-accent: var(--color-brand);
+  --section-bg: var(--section-surface, var(--section-background, var(--card-section-bg))); /* Dedicated section background */
+  --section-border: color-mix(in srgb, var(--section-accent) 30%, transparent); /* Use accent color with transparency */
+  --section-header-text: color-mix(in srgb, var(--foreground) 85%, transparent); /* More contrast */
+  --section-header-meta: color-mix(in srgb, var(--foreground) 65%, transparent);  /* Improved readability */
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+  --section-card-border: color-mix(in srgb, var(--color-gray-400) 50%, transparent); /* Grey border for both themes */
+  --section-card-hover: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+  --section-card-grid-min: 180px; /* More flexible, allows more items per row */
+  --section-reflection-opacity: var(--section-reflection-opacity, 0);
+  --section-reflection-offset-x: var(--section-reflection-offset-x, 0%);
+  --section-reflection-offset-y: var(--section-reflection-offset-y, 0%);
+  --section-reflection-angle: var(--section-reflection-angle, 0deg);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  /* COMPACT: Reduced padding and gaps */
+  gap: var(--section-card-gap) !important;
+  padding: var(--section-padding) !important;
+  border-radius: var(--card-border-radius) !important;
+  border: var(--section-border) !important; /* DISCRETE: Subtle borders for elegance */
+  background: var(--section-bg);
+  box-shadow: var(--card-box-shadow);
+  /* Enhanced transitions for premium feel */
+  transition: border-color 350ms cubic-bezier(0.4, 0, 0.2, 1), 
+              background 350ms cubic-bezier(0.4, 0, 0.2, 1), 
+              box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1),
+              transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  
+  /* Subtle entrance animation */
+  animation: sectionFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+  
+  @keyframes sectionFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Minimalistic hover effect */
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--card-box-shadow-hover),
+                0 0 0 1px color-mix(in srgb, var(--section-accent) 15%, transparent);
+    border-color: color-mix(in srgb, var(--section-accent) 30%, transparent);
+  }
+}
+
+.section-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+  flex-wrap: wrap;
+}
+
+.section-block__title {
+  /* GLOBALLY ENFORCED: Use main variables for typography */
+  font-size: var(--section-title-font-size) !important;
+  font-weight: var(--section-title-font-weight) !important;
+  letter-spacing: var(--section-title-letter-spacing) !important;
+  line-height: var(--section-title-line-height) !important;
+  color: var(--card-text-primary) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  transition: color 0.22s ease;
+  
+  /* Minimalistic hover */
+  .section-block:hover & {
+    color: color-mix(in srgb, var(--card-text-primary) 90%, var(--section-accent) 10%);
+  }
+}
+
+.section-block__subtitle {
+  font-size: var(--font-section-description);
+  color: var(--section-header-meta);
+  margin: 0;
+}
+
+.section-block__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+  padding: calc(var(--tag-padding-y-sm) * 0.75) calc(var(--tag-padding-x) * 0.875); /* COMPACT: Reduced padding */
+  border-radius: 999px;
+  border: none !important;
+  /* NO BORDER (only cards have borders) */
+  background: color-mix(in srgb, var(--section-accent) 12%, transparent);
+  font-size: var(--font-section-meta);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: color-mix(in srgb, var(--section-accent) 80%, var(--foreground) 20%);
+}
+
+.section-grid {
+  @include section-responsive-grid(var(--section-grid-min-width), var(--section-card-gap));
+}
+
+.section-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-card-gap);
+}
+
+.section-card {
+  @include card;
+  /* All properties (padding, border, background, border-radius, hover) are set by @include card */
+  /* Matches: rounded-3xl border border-border/40 bg-card/70 p-5 */
+  /* Background is forced by @include card with !important */
+}
+
+.section-card--metric {
+  min-height: auto !important;
+  height: auto !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  
+  /* Remove any minimum height constraints to allow perfect content fit */
+  & > * {
+    flex-shrink: 0;
+  }
+}
+
+.section-card__label {
+  @extend %unified-card-label;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+  text-transform: capitalize;
+
+  > lucide-icon {
+    color: color-mix(in srgb, var(--section-accent) 70%, transparent);
+    filter: none; /* Removed drop-shadow */
+  }
+}
+
+.section-card__value {
+  @extend %unified-card-value;
+  font-size: calc(var(--card-value-font-size) + 4px) !important; /* Bigger font */
+  font-weight: var(--card-value-font-weight) !important;
+  letter-spacing: var(--card-value-letter-spacing) !important;
+  line-height: var(--card-value-line-height) !important;
+  color: var(--card-text-primary) !important;
+  transition: color 0.25s ease;
+  text-shadow: none;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.75);
+  
+  > lucide-icon {
+    flex-shrink: 0;
+    opacity: 0.85;
+  }
+}
+
+.section-card__meta {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.75); /* COMPACT: Reduced from full gap */
+  font-size: var(--font-section-meta);
+  color: color-mix(in srgb, var(--foreground) 85%, transparent);
+  line-height: 1.2; /* COMPACT: Tight line-height */
+}
+
+.section-card__progress {
+  width: 100%;
+  height: 6px;
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--section-accent) 12%, transparent);
+  overflow: hidden;
+
+  &-bar {
+    height: 100%;
+    border-radius: inherit;
+    background: color-mix(in srgb, var(--section-accent) 72%, transparent);
+  }
+}
+
+.section-empty {
+  /* COMPACT: Reduced padding */
+  padding: calc(var(--card-padding) * 1.5);
+  border-radius: var(--section-card-border-radius);
+  border: none !important;
+  /* CLEAN: No borders on empty states - only sections and cards have borders */
+  background: color-mix(in srgb, var(--section-accent) 10%, transparent);
+  text-align: center;
+  color: color-mix(in srgb, var(--foreground) 85%, transparent);
+  min-height: auto;
+  /* COMPACT: No minimum height */
+}
+
+/* -------------------------------------------------------------------------- */
+/* Section Type Modifiers                                                     */
+/* -------------------------------------------------------------------------- */
+
+.section-block--metrics {
+  --section-accent: var(--color-brand);
+  --section-background: var(--card-section-bg); /* Theme-aware: grey-800 (night) or grey-50 (day) */
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+.section-block--insights {
+  --section-accent: color-mix(in srgb, var(--color-brand) 65%, var(--foreground) 35%);
+  --section-background: color-mix(in srgb, var(--card) 94%, transparent);
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+.section-block--list {
+  --section-accent: color-mix(in srgb, var(--color-brand) 45%, var(--foreground) 55%);
+  --section-card-grid-min: 180px;
+  --section-background: color-mix(in srgb, var(--card) 93%, transparent);
+}
+
+.section-block--contacts {
+  --section-accent: color-mix(in srgb, var(--color-brand) 70%, var(--foreground) 30%);
+  --section-card-grid-min: 180px; /* More compact */
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+.section-block--timeline {
+  --section-accent: color-mix(in srgb, var(--color-brand) 55%, var(--foreground) 45%);
+  --section-card-grid-min: 200px; /* More compact */
+}
+
+.section-block--map {
+  --section-accent: color-mix(in srgb, var(--color-brand) 50%, var(--foreground) 50%);
+  --section-card-grid-min: 220px; /* More compact */
+  --section-background: color-mix(in srgb, var(--card) 90%, transparent);
+}
+
+.section-block--network {
+  --section-accent: color-mix(in srgb, var(--color-brand) 60%, var(--foreground) 40%);
+  --section-card-grid-min: 200px; /* More compact */
+}
+
+.section-block--product {
+  --section-accent: color-mix(in srgb, var(--color-brand) 75%, var(--foreground) 25%);
+  --section-background: color-mix(in srgb, var(--card) 88%, transparent);
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+.section-block--financial {
+  --section-accent: color-mix(in srgb, var(--color-brand) 40%, var(--foreground) 60%);
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+.section-block--solutions {
+  --section-accent: color-mix(in srgb, var(--color-brand) 65%, var(--foreground) 35%);
+  --section-card-grid-min: 220px; /* More compact */
+  --section-card-background: var(--card-section-card-bg); /* Theme-aware: grey-700 (night) or grey-100 (day) - more contrasty */
+}
+
+@media (max-width: 768px) {
+  .section-block {
+    gap: var(--card-gap);
+    padding: clamp(12px, 2.5vw, 18px); /* Increased by 2px */
+  }
+
+  .section-grid {
+    grid-template-columns: repeat(auto-fit, minmax(var(--section-grid-min-width), 1fr));
+    gap: var(--section-grid-gap-mobile);
+  }
+
+  .section-list {
+    gap: var(--section-grid-gap-mobile);
+  }
+}
+

package/styles/components/sections/_sections-base.scss

@@ -0,0 +1,332 @@
+/* Consolidated base styles for all card sections */
+
+/* ===== GRID MIXINS ===== */
+/* Default gap values map to CSS variables: --grid-gap-xs (3px), --grid-gap-sm (4px) */
+@mixin section-grid($min-width: var(--section-grid-min-width), $gap: var(--card-gap)) {
+  display: grid !important;
+  gap: $gap;
+  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr)) !important;
+  min-height: 0;
+
+  @media (max-width: 520px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@mixin section-grid-responsive($min-width: var(--section-grid-min-width), $gap: var(--section-card-gap), $tablet-breakpoint: 820px) {
+  display: grid !important;
+  gap: $gap;
+  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr)) !important;
+  min-height: 0;
+
+  @media (max-width: $tablet-breakpoint) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* ===== UNIVERSAL CARD MIXIN ===== */
+/* Used for ALL card types: metric, contact, list, product, etc. */
+/* Guarantees 100% consistency across entire application */
+/* Style matches: rounded-2xl, border-border/40, bg-card/70, hover effects */
+@mixin card {
+  /* UNIFIED CARD DESIGN - All section items use identical styling */
+  /* NOTE: Global enforcement (_global-enforcement.scss) overrides all these values with !important */
+  /* This mixin provides defaults, but global enforcement ensures 100% consistency */
+  
+  /* Use section-item variables for consistency (global enforcement overrides with !important) */
+  border: var(--section-item-border);
+  border-radius: var(--section-item-border-radius);
+  padding: var(--card-padding);
+  background: linear-gradient(135deg, var(--section-item-background) 0%, color-mix(in srgb, var(--section-item-background) 98%, rgba(255, 121, 0, 0.02)) 100%);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  min-height: var(--card-min-height);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--section-item-box-shadow);
+  
+  /* Minimalistic transitions */
+  transition: background 0.22s ease, 
+              box-shadow 0.22s ease,
+              border-color 0.22s ease,
+              transform 0.22s ease;
+  
+  /* Minimalistic accent line on left */
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: rgba(255, 121, 0, 0.6);
+    opacity: 0;
+    transition: opacity 0.22s ease;
+    border-radius: 0 2px 2px 0;
+  }
+
+  &:hover {
+    /* Minimalistic hover */
+    box-shadow: var(--section-item-box-shadow-hover),
+                0 0 0 1px color-mix(in srgb, rgba(255, 121, 0, 0.15), transparent);
+    transform: translateY(-2px) var(--section-item-hover-transform);
+    border-color: color-mix(in srgb, rgba(255, 121, 0, 0.2), transparent);
+    
+    /* Accent line appears on hover */
+    &::before {
+      opacity: 0.6;
+    }
+  }
+  
+  /* Focus state for keyboard navigation and accessibility */
+  &:focus-visible {
+    outline: 2px solid rgba(255, 121, 0, 0.6);
+    outline-offset: 2px;
+    border-color: rgba(255, 121, 0, 0.5);
+  }
+  
+  /* Reset will-change when not hovering to free resources */
+  &:not(:hover) {
+    will-change: auto;
+  }
+  
+  /* Accessibility: Disable animations for reduced motion preference */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+    will-change: auto !important;
+    transform: none !important;
+    
+    &::before {
+      display: none;
+    }
+  }
+}
+
+/* ===== METRIC CARD MIXIN (DEPRECATED) ===== */
+/* Legacy alias for backward compatibility - use @mixin card instead */
+@mixin metric-card {
+  @include card;
+}
+
+/* ===== CARD BASE STYLES (DEPRECATED) ===== */
+/* Legacy alias for backward compatibility - use @mixin card instead */
+@mixin section-card-base($accent: var(--section-accent, var(--accent))) {
+  @include card;
+}
+
+/* ===== UNIFIED SECTION CARD CLASS ===== */
+/* Master card component for direct use without mixins */
+/* This class provides the same style as Tailwind: rounded-2xl, border-border/40, bg-card/70 */
+.unified-card {
+  @include card;
+}
+
+/* Alias for backward compatibility */
+.section-card {
+  @include card;
+}
+
+/* ===== METRIC TYPOGRAPHY MIXINS ===== */
+/* Consistent label/value styling for all metric cards */
+/* NOTE: Font sizes are now enforced by unified-cards.scss - do not set font-size here */
+@mixin metric-label {
+  /* font-size is set by unified-cards.scss - do not override */
+  letter-spacing: 0.04em;
+  text-transform: none;
+  color: var(--card-text-label);
+  line-height: 1.3;
+  font-weight: 600;
+  transition: color 0.22s ease;
+  
+  /* Minimalistic hover */
+  .section-card:hover &,
+  .unified-card:hover & {
+    color: color-mix(in srgb, var(--card-text-label) 90%, rgba(255, 121, 0, 0.1));
+  }
+}
+
+@mixin metric-value {
+  /* font-size is set by unified-cards.scss - do not override */
+  font-weight: 700;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+  transition: color 0.22s ease;
+  
+  /* Minimalistic hover */
+  .section-card:hover &,
+  .unified-card:hover & {
+    color: color-mix(in srgb, var(--foreground) 90%, rgba(255, 121, 0, 0.1));
+  }
+}
+
+@mixin section-description {
+  font-size: var(--font-section-description);
+  color: color-mix(in srgb, var(--foreground) 70%, transparent);
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+/* Legacy aliases for backward compatibility */
+@mixin section-label {
+  @include metric-label;
+}
+
+@mixin section-value {
+  @include metric-value;
+}
+
+/* ===== COMMON COMPONENTS ===== */
+@mixin section-empty-state($accent: var(--section-accent, var(--accent))) {
+  /* COMPACT: Reduced padding */
+  padding: calc(var(--card-padding) * 1.5);
+  text-align: center;
+  color: color-mix(in srgb, var(--foreground) 55%, transparent);
+  border: none !important;
+  /* CLEAN: No borders on empty states - only sections and cards have borders */
+  border-radius: var(--section-card-border-radius);
+  background: color-mix(in srgb, #{$accent} 10%, transparent);
+  min-height: auto;
+}
+
+@mixin section-empty-icon {
+  margin: 0 auto var(--card-gap);
+  opacity: 0.65;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
+}
+
+/* ===== TREND COLORS ===== */
+/* Standardized trend colors used across ALL sections */
+@mixin trend-colors {
+  &.trend--up {
+    color: #4ade80 !important;
+  }
+
+  &.trend--down {
+    color: #f87171 !important;
+  }
+
+  &.trend--stable {
+    color: #facc15 !important;
+  }
+
+  &.trend--neutral {
+    color: #94a3b8 !important;
+  }
+}
+
+/* ===== STANDARDIZED STATUS CLASSES ===== */
+/* Use these classes across ALL sections for consistent status styling */
+.status--completed,
+.status--success {
+  border-color: rgba(74, 222, 128, 0.4) !important;
+  color: rgba(134, 239, 172, 1) !important;
+  background: color-mix(in srgb, rgba(34, 197, 94, 0.15), transparent) !important;
+}
+
+.status--active,
+.status--in-progress {
+  border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 40%, transparent) !important;
+  color: color-mix(in srgb, var(--section-accent, var(--accent)) 70%, var(--foreground) 30%) !important;
+  background: color-mix(in srgb, var(--section-accent, var(--accent)) 15%, transparent) !important;
+}
+
+.status--pending,
+.status--warning {
+  border-color: rgba(251, 191, 36, 0.4) !important;
+  color: rgba(253, 224, 71, 1) !important;
+  background: color-mix(in srgb, rgba(253, 186, 116, 0.15), transparent) !important;
+}
+
+.status--blocked,
+.status--cancelled,
+.status--delayed,
+.status--inactive,
+.status--error {
+  border-color: rgba(248, 113, 113, 0.4) !important;
+  color: rgba(252, 165, 165, 1) !important;
+  background: color-mix(in srgb, rgba(239, 68, 68, 0.15), transparent) !important;
+}
+
+.status--default {
+  border-color: rgba(120, 120, 120, 0.4) !important;
+  color: rgba(200, 200, 200, 0.85) !important;
+  background: color-mix(in srgb, rgba(40, 40, 40, 0.2), transparent) !important;
+}
+
+/* ===== STANDARDIZED PRIORITY CLASSES ===== */
+.priority--high {
+  border-color: rgba(248, 113, 113, 0.4) !important;
+  color: rgba(252, 165, 165, 1) !important;
+  background: color-mix(in srgb, rgba(239, 68, 68, 0.15), transparent) !important;
+}
+
+.priority--medium {
+  border-color: rgba(251, 191, 36, 0.4) !important;
+  color: rgba(253, 224, 71, 1) !important;
+  background: color-mix(in srgb, rgba(253, 186, 116, 0.15), transparent) !important;
+}
+
+.priority--low {
+  border-color: rgba(74, 222, 128, 0.4) !important;
+  color: rgba(134, 239, 172, 1) !important;
+  background: color-mix(in srgb, rgba(34, 197, 94, 0.15), transparent) !important;
+}
+
+.priority--default {
+  border-color: rgba(120, 120, 120, 0.4) !important;
+  color: rgba(200, 200, 200, 0.85) !important;
+  background: color-mix(in srgb, rgba(40, 40, 40, 0.2), transparent) !important;
+}
+
+/* Removed obsolete section-card-mobile mixin - continuous responsive design via base system */
+
+/* ===================================================================
+   REDUCED MOTION SUPPORT
+   Global accessibility support for all sections
+   =================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable all card animations and transitions */
+  .unified-card,
+  .section-card,
+  [class*="__card"],
+  [class*="-card"],
+  [class*="__item"],
+  [class*="-item"] {
+    transition: none !important;
+    animation: none !important;
+  }
+  
+  /* Disable trend color effects */
+  .trend--up,
+  .trend--down,
+  .trend--stable,
+  .trend--neutral {
+    text-shadow: none !important;
+    filter: none !important;
+  }
+  
+  /* Disable status effects */
+  .status--completed,
+  .status--success,
+  .status--active,
+  .status--in-progress,
+  .status--pending,
+  .status--warning,
+  .status--blocked,
+  .status--cancelled,
+  .status--delayed,
+  .status--inactive,
+  .status--error,
+  .status--default,
+  .priority--high,
+  .priority--medium,
+  .priority--low,
+  .priority--default {
+    filter: none !important;
+  }
+}

package/styles/components/sections/_social-media.scss

@@ -0,0 +1,88 @@
+@import 'sections/sections-base';
+
+/* Social media section adhering to shared token system */
+.ai-section--social-media {
+  --section-accent: var(--color-brand);
+  --section-item-radius: var(--card-border-radius);
+  --post-gap: calc(var(--card-gap) * 0.6);
+}
+
+.social-feed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--post-gap);
+  width: 100%;
+}
+
+.social-post {
+  @include card;
+  border: 1px solid color-mix(in srgb, var(--section-accent) 60%, transparent);
+  background: var(--card-background);
+  padding: var(--card-padding);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--card-gap);
+  align-items: center;
+  min-height: 140px;
+}
+
+.social-post__avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--section-accent) 20%, var(--card));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-section-meta);
+  color: var(--card-background);
+}
+
+.social-post__body {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--card-gap) * 0.4);
+}
+
+.social-post__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--card-gap);
+}
+
+.social-post__author {
+  font-weight: 600;
+  font-size: var(--card-title-font-size);
+  color: var(--card-text-primary);
+}
+
+.social-post__handle {
+  font-size: var(--font-section-meta);
+  color: var(--card-text-muted);
+}
+
+.social-post__content {
+  font-size: var(--card-value-font-size);
+  color: var(--card-text-primary);
+}
+
+.social-post__stats {
+  display: flex;
+  gap: calc(var(--card-gap) * 0.7);
+  font-size: var(--font-section-meta);
+  color: color-mix(in srgb, var(--foreground) 70%, transparent);
+}
+
+.social-post__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--card-gap) * 0.3);
+}
+
+.social-post__stat-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--section-accent);
+}