boreal-ui 0.0.76 → 0.0.78

package/dist/next/Card.css

@@ -0,0 +1,993 @@
+@charset "UTF-8";
+/**
+ * ---------------------------------------------------------------------
+ * theme.scss
+ * ---------------------------------------------------------------------
+ * Global design tokens and theme configuration for the Boreal UI system.
+ * This file defines SCSS variables, maps, and constants for:
+ * - Colors (brand, background, feedback, text)
+ * - Fonts (families, sizes, weights)
+ * - Spacing
+ * - Border radii
+ * - Shadows
+ * - Transitions
+ * - Z-index layers
+ * - Thematic color maps
+ * - UI states (success, error, warning)
+ * - Rounding and shadow presets
+ * 
+ * All variables support the `!default` flag to allow overrides via user-defined themes.
+ * ---------------------------------------------------------------------
+ *
+ * == Color Palette ==
+ * $primary-color           – Brand primary color
+ * $secondary-color         – Secondary accent color
+ * $tertiary-color          – Alternate accent color
+ * $quaternary-color        – Alternate accent color
+ * $background-color        – Main background color (dark)
+ * $background-color-surface – Surface layer background (cards, modals)
+ * $error-color, $success-color, $warning-color – Feedback states
+ * $link-color              – Link default color
+ * $link-hover-color        – Link hover state
+ * $text-color, $text-color-light, $text-color-primary, $text-color-secondary – Text coloring
+ *
+ * == Typography ==
+ * $font-family-primary / secondary – Primary typefaces
+ * $font-size-xxs to $font-size-xxl – Font size scale
+ * $font-weight-light to bolder     – Font weights
+ *
+ * == Spacing ==
+ * $spacing-xxs to $spacing-xl – Margin/padding utility scale
+ *
+ * == Border Radius ==
+ * $border-radius-xs to full  – Border rounding presets
+ *
+ * == Shadows ==
+ * $box-shadow-light to intense – Shadow elevation levels
+ * $inverted-shadows            – Shadows used on dark surfaces (e.g. modals)
+ *
+ * == Transitions ==
+ * $transition-fast / default / slow – Standard easing transitions
+ *
+ * == Z-Index Layers ==
+ * $z-index-drawer   – For slide-out panels
+ * $z-index-modal    – For modals and overlays
+ * $z-index-tooltip  – Highest layer for tooltips and floating labels
+ *
+ * == Theme Map ==
+ * $themes: map of theme names (e.g. "primary", "secondary") to their visual styles
+ *  - Each theme includes: bg, hover, text, border, text-hover
+ *
+ * == State Map ==
+ * $states: visual styles for UI feedback states (success, error, warning)
+ *
+ * == Rounding / Shadow Maps ==
+ * $rounding: key-value pairs for component rounding levels
+ * $shadow: key-value pairs for shadow levels
+ */
+/**
+ * -----------------------------------------------------
+ * _breakpoints.scss
+ * -----------------------------------------------------
+ * These constants define the standard device-width breakpoints
+ * used in responsive media queries throughout the theme.
+ *
+ * - $breakpoint-xs: 320px  (Extra small, portrait phones)
+ * - $breakpoint-sm: 480px  (Small devices, larger phones)
+ * - $breakpoint-md: 768px  (Medium devices, tablets)
+ * - $breakpoint-lg: 1024px (Large devices, desktops)
+ * - $breakpoint-xl: 1280px (Extra large desktops)
+ * - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+ *
+ * $breakpoints map:
+ *  Use this map to loop over breakpoints or access named values.
+ */
+/**
+ * -----------------------------------------------------
+ * _animations.scss
+ * -----------------------------------------------------
+ * This file contains reusable keyframe animations
+ * used across the component library for transitions,
+ * loaders, and visual enhancements.
+ *
+ * List of Animations:
+ *
+ * 1. fade-in
+ *    - Smoothly fades in an element by transitioning opacity from 0 to 1.
+ *
+ * 2. slide-up
+ *    - Slides an element upward into view from below while fading in.
+ *
+ * 3. spin-3d
+ *    - Rotates an element in 3D space along both X and Y axes (360°).
+ *
+ * 4. spin
+ *    - Continuously rotates an element clockwise in 2D space.
+ *
+ * 5. pulse
+ *    - Gently scales an element up and down to create a pulsing effect.
+ *
+ * 6. fade-in-up
+ *    - Combines a fade-in with a slight upward motion (used for tooltips, popups).
+ *
+ * 7. progress-grow
+ *    - Expands the width of a progress bar from 0% to 100%.
+ *
+ * 8. indeterminate-move
+ *    - Moves an element from left to right in a loop, used in indeterminate loaders.
+ *
+ * 9. skeleton-loading
+ *    - Creates a sweeping shimmer effect for skeleton loaders.
+ */
+@keyframes _fade-in_150r3_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _slide-up_150r3_1 {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes _spin-3d_150r3_1 {
+  0% {
+    transform: rotateX(0deg) rotateY(0deg);
+  }
+  100% {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+@keyframes _spin_150r3_1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes _pulse_150r3_1 {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes _fade-in-up_150r3_1 {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes _progress-grow_150r3_1 {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+@keyframes _indeterminate-move_150r3_1 {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes _skeleton-loading_150r3_1 {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@media (forced-colors: active) {
+  ._card_150r3_205 {
+    border: 1px solid ButtonText;
+    outline-color: Highlight;
+    box-shadow: none !important;
+    background: Canvas;
+    color: CanvasText;
+  }
+  ._outline_150r3_212 {
+    border: 1px solid ButtonText;
+  }
+  ._footer_150r3_215 {
+    border-top: 1px solid ButtonText;
+  }
+  ._clickable_150r3_218:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 3px;
+  }
+}
+._card_150r3_205 {
+  overflow: hidden;
+  margin: var(--spacing-sm);
+  position: relative;
+  background-color: var(--background-color-surface);
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  height: fit-content;
+  color: var(--text-color-primary);
+  transition: transform var(--transition-default);
+}
+@media (width <= 479.98px) {
+  ._card_150r3_205 {
+    margin: var(--spacing-xs);
+  }
+}
+@media (min-width: 1024px) {
+  ._card_150r3_205 {
+    margin: var(--spacing-md);
+  }
+}
+
+._borderNone_150r3_246 {
+  border-width: var(--border-width-none);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._borderXs_150r3_252 {
+  border-width: var(--border-width-xs);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._borderSmall_150r3_258 {
+  border-width: var(--border-width-sm);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._borderMedium_150r3_264 {
+  border-width: var(--border-width-md);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._borderLarge_150r3_270 {
+  border-width: var(--border-width-lg);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._borderXl_150r3_276 {
+  border-width: var(--border-width-xl);
+  border-style: solid;
+  border-color: var(--divider-color);
+}
+
+._roundNone_150r3_282 {
+  border-radius: var(--border-radius-none);
+}
+
+._roundSmall_150r3_286 {
+  border-radius: var(--border-radius-sm);
+}
+
+._roundMedium_150r3_290 {
+  border-radius: var(--border-radius-md);
+}
+
+._roundLarge_150r3_294 {
+  border-radius: var(--border-radius-lg);
+}
+
+._roundFull_150r3_298 {
+  border-radius: var(--border-radius-full);
+}
+
+._shadowNone_150r3_302 {
+  box-shadow: var(--box-shadow-none);
+}
+
+._shadowLight_150r3_306 {
+  box-shadow: var(--box-shadow-light);
+}
+
+._shadowMedium_150r3_310 {
+  box-shadow: var(--box-shadow-medium);
+}
+
+._shadowStrong_150r3_314 {
+  box-shadow: var(--box-shadow-heavy);
+}
+
+._shadowIntense_150r3_318 {
+  box-shadow: var(--box-shadow-intense);
+}
+
+._loading_150r3_322 {
+  background: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 250px;
+}
+@media (width <= 479.98px) {
+  ._loading_150r3_322 {
+    min-height: 180px;
+  }
+}
+@media (min-width: 1024px) {
+  ._loading_150r3_322 {
+    min-height: 300px;
+  }
+}
+
+._fade_in_150r3_343 {
+  animation: _fade-in_150r3_1 0.8s ease-in-out;
+}
+
+._media_150r3_347 {
+  width: 100%;
+  height: auto;
+  position: relative;
+  aspect-ratio: 4/4;
+  object-fit: cover;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+@media (width <= 479.98px) {
+  ._media_150r3_347 {
+    aspect-ratio: 1/1;
+  }
+}
+@media (min-width: 1024px) {
+  ._media_150r3_347 {
+    aspect-ratio: 16/9;
+  }
+}
+
+._image_150r3_366 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+._image_150r3_366 img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._vertical_150r3_378 {
+  flex-direction: column;
+}
+._vertical_150r3_378 ._content_150r3_381 {
+  flex-direction: column;
+}
+._vertical_150r3_378 ._image_150r3_366 {
+  width: 100%;
+  max-height: 200px;
+}
+@media (width <= 479.98px) {
+  ._vertical_150r3_378 ._image_150r3_366 {
+    max-height: 150px;
+  }
+}
+@media (min-width: 1024px) {
+  ._vertical_150r3_378 ._image_150r3_366 {
+    max-height: 300px;
+  }
+}
+
+._horizontal_150r3_399 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  width: 100%;
+  height: auto;
+}
+@media (width <= 479.98px) {
+  ._horizontal_150r3_399 {
+    flex-direction: column;
+    max-width: 100%;
+    min-height: 150px;
+  }
+}
+@media (min-width: 1024px) {
+  ._horizontal_150r3_399 {
+    min-height: 250px;
+  }
+}
+._horizontal_150r3_399 ._content_150r3_381 {
+  flex-direction: row;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+@media (width <= 479.98px) {
+  ._horizontal_150r3_399 ._content_150r3_381 {
+    flex-direction: column;
+  }
+}
+._horizontal_150r3_399 ._image_150r3_366 {
+  width: 50%;
+  height: auto;
+  aspect-ratio: 1.5;
+  object-fit: cover;
+  display: block;
+}
+@media (width <= 479.98px) {
+  ._horizontal_150r3_399 ._image_150r3_366 {
+    width: 100%;
+    aspect-ratio: 1/1;
+  }
+}
+@media (min-width: 1024px) {
+  ._horizontal_150r3_399 ._image_150r3_366 {
+    aspect-ratio: 16/10;
+  }
+}
+._horizontal_150r3_399 ._body_150r3_449 {
+  flex: 1;
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@media (width <= 479.98px) {
+  ._horizontal_150r3_399 ._body_150r3_449 {
+    padding: var(--spacing-sm);
+  }
+}
+@media (min-width: 1024px) {
+  ._horizontal_150r3_399 ._body_150r3_449 {
+    padding: var(--spacing-lg);
+  }
+}
+._horizontal_150r3_399 ._footer_150r3_215 {
+  padding: var(--spacing-md);
+}
+@media (width <= 479.98px) {
+  ._horizontal_150r3_399 ._footer_150r3_215 {
+    padding: var(--spacing-sm);
+  }
+}
+@media (min-width: 1024px) {
+  ._horizontal_150r3_399 ._footer_150r3_215 {
+    padding: var(--spacing-lg);
+  }
+}
+
+._disabled_150r3_480 {
+  background-color: var(--disabled-color);
+  color: var(--text-color-primary);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+  box-shadow: none;
+}
+
+._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid currentcolor;
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._primary_150r3_500 {
+  background: var(--primary-color);
+  color: var(--text-color-primary);
+}
+._primary_150r3_500 ._icon_150r3_504,
+._primary_150r3_500 ._description_150r3_505 {
+  color: inherit;
+}
+._primary_150r3_500 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._primary_150r3_500._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--primary-color);
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._primary_150r3_500._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._secondary_150r3_522 {
+  background: var(--secondary-color);
+  color: var(--text-color-secondary);
+}
+._secondary_150r3_522 ._icon_150r3_504,
+._secondary_150r3_522 ._description_150r3_505 {
+  color: inherit;
+}
+._secondary_150r3_522 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._secondary_150r3_522._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--secondary-color);
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._secondary_150r3_522._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._tertiary_150r3_544 {
+  background: var(--tertiary-color);
+  color: var(--text-color-primary);
+}
+._tertiary_150r3_544 ._icon_150r3_504,
+._tertiary_150r3_544 ._description_150r3_505 {
+  color: inherit;
+}
+._tertiary_150r3_544 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._tertiary_150r3_544._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--tertiary-color);
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._tertiary_150r3_544._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._quaternary_150r3_566 {
+  background: var(--quaternary-color);
+  color: var(--text-color-primary);
+}
+._quaternary_150r3_566 ._icon_150r3_504,
+._quaternary_150r3_566 ._description_150r3_505 {
+  color: inherit;
+}
+._quaternary_150r3_566 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._quaternary_150r3_566._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--quaternary-color);
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._quaternary_150r3_566._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._clear_150r3_588 {
+  background: transparent;
+  color: var(--text-color-primary);
+}
+._clear_150r3_588 ._icon_150r3_504,
+._clear_150r3_588 ._description_150r3_505 {
+  color: inherit;
+}
+._clear_150r3_588 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._clear_150r3_588._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--text-color-primary);
+  box-shadow: none;
+}
+@media (width <= 479.98px) {
+  ._clear_150r3_588._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._success_150r3_610 {
+  background: var(--success-color);
+  color: var(--text-color-primary);
+}
+._success_150r3_610 ._icon_150r3_504,
+._success_150r3_610 ._description_150r3_505 {
+  color: inherit;
+}
+._success_150r3_610 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._success_150r3_610._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--success-color);
+}
+@media (width <= 479.98px) {
+  ._success_150r3_610._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._error_150r3_631 {
+  background: var(--error-color);
+  color: var(--text-color-primary);
+}
+._error_150r3_631 ._icon_150r3_504,
+._error_150r3_631 ._description_150r3_505 {
+  color: inherit;
+}
+._error_150r3_631 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._error_150r3_631._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--error-color);
+}
+@media (width <= 479.98px) {
+  ._error_150r3_631._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._warning_150r3_652 {
+  background: var(--warning-color);
+  color: var(--text-color-primary);
+}
+._warning_150r3_652 ._icon_150r3_504,
+._warning_150r3_652 ._description_150r3_505 {
+  color: inherit;
+}
+._warning_150r3_652 ._loading_150r3_322 {
+  background-color: transparent;
+}
+._warning_150r3_652._outline_150r3_212 {
+  background: transparent;
+  border: 2px solid var(--warning-color);
+}
+@media (width <= 479.98px) {
+  ._warning_150r3_652._outline_150r3_212 {
+    border-width: 1.5px;
+  }
+}
+
+._borderXs_150r3_252._outline_150r3_212 {
+  border-width: var(--border-width-xs);
+}
+
+._borderSmall_150r3_258._outline_150r3_212 {
+  border-width: var(--border-width-sm);
+}
+
+._borderMedium_150r3_264._outline_150r3_212 {
+  border-width: var(--border-width-md);
+}
+
+._borderLarge_150r3_270._outline_150r3_212 {
+  border-width: var(--border-width-lg);
+}
+
+._borderXl_150r3_276._outline_150r3_212 {
+  border-width: var(--border-width-xl);
+}
+
+._content_150r3_381 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+._header_150r3_699 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-md);
+}
+@media (width <= 479.98px) {
+  ._header_150r3_699 {
+    padding: var(--spacing-sm);
+  }
+}
+@media (min-width: 1024px) {
+  ._header_150r3_699 {
+    padding: var(--spacing-lg);
+  }
+}
+
+._header_150r3_699,
+._body_150r3_449 {
+  padding: var(--spacing-md);
+  display: flex;
+}
+
+._body_150r3_449 {
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+@media (min-width: 1024px) {
+  ._body_150r3_449 {
+    gap: var(--spacing-md);
+  }
+}
+
+._title_150r3_739 {
+  margin: 0;
+  flex: 1;
+  display: flex;
+  gap: var(--spacing-sm);
+  font-family: var(--font-family-heading);
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-h4);
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--letter-spacing-heading);
+}
+@media (width <= 479.98px) {
+  ._title_150r3_739 {
+    font-size: var(--font-size-h6);
+  }
+}
+@media (min-width: 1024px) {
+  ._title_150r3_739 {
+    font-size: var(--font-size-h3);
+  }
+}
+
+._icon_150r3_504 {
+  font-size: 1.2em;
+  display: flex;
+  color: inherit;
+  line-height: 1;
+}
+@media (width <= 479.98px) {
+  ._icon_150r3_504 {
+    font-size: 1em;
+  }
+}
+@media (min-width: 1024px) {
+  ._icon_150r3_504 {
+    font-size: 1.4em;
+  }
+}
+
+._description_150r3_505 {
+  width: 95%;
+  margin: var(--spacing-xxs) auto;
+  color: inherit;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-body);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+@media (width <= 479.98px) {
+  ._description_150r3_505 {
+    font-size: var(--font-size-label);
+  }
+}
+@media (min-width: 1024px) {
+  ._description_150r3_505 {
+    font-size: var(--font-size-body);
+  }
+}
+
+._footer_150r3_215 {
+  padding: var(--spacing-md);
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+}
+@media (width <= 479.98px) {
+  ._footer_150r3_215 {
+    padding: var(--spacing-sm);
+    border-width: 1px;
+  }
+}
+@media (min-width: 1024px) {
+  ._footer_150r3_215 {
+    padding: var(--spacing-lg);
+  }
+}
+
+._actions_150r3_815 {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+@media (width <= 479.98px) {
+  ._actions_150r3_815 {
+    gap: var(--spacing-xs);
+  }
+}
+@media (min-width: 1024px) {
+  ._actions_150r3_815 {
+    gap: var(--spacing-md);
+  }
+}
+
+._xs_150r3_834 ._description_150r3_505 {
+  font-size: var(--font-size-caption);
+}
+._xs_150r3_834 ._icon_150r3_504 {
+  font-size: 0.9em;
+}
+._xs_150r3_834 ._title_150r3_739 {
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-heading);
+}
+._xs_150r3_834 ._children_150r3_844 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-caption);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+._small_150r3_851 ._description_150r3_505 {
+  font-size: var(--font-size-label);
+}
+._small_150r3_851 ._icon_150r3_504 {
+  font-size: 1em;
+}
+._small_150r3_851 ._title_150r3_739 {
+  font-size: var(--font-size-body-sm);
+}
+._small_150r3_851 ._children_150r3_844 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+._medium_150r3_867 ._description_150r3_505 {
+  font-size: var(--font-size-body-sm);
+}
+._medium_150r3_867 ._icon_150r3_504 {
+  font-size: 1.2em;
+}
+._medium_150r3_867 ._title_150r3_739 {
+  font-size: var(--font-size-body);
+}
+._medium_150r3_867 ._children_150r3_844 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+._large_150r3_883 ._description_150r3_505 {
+  font-size: var(--font-size-body);
+}
+._large_150r3_883 ._icon_150r3_504 {
+  font-size: 1.4em;
+}
+._large_150r3_883 ._title_150r3_739 {
+  font-size: var(--font-size-h6);
+}
+._large_150r3_883 ._children_150r3_844 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+._xl_150r3_899 ._description_150r3_505 {
+  font-size: var(--font-size-h6);
+}
+._xl_150r3_899 ._icon_150r3_504 {
+  font-size: 1.2em;
+}
+._xl_150r3_899 ._title_150r3_739 {
+  font-size: var(--font-size-h4);
+}
+._xl_150r3_899 ._children_150r3_844 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-h6);
+  line-height: var(--line-height-body);
+  letter-spacing: var(--letter-spacing-body);
+}
+
+._left_150r3_915 {
+  text-align: left;
+}
+._left_150r3_915 ._header_150r3_699,
+._left_150r3_915 ._body_150r3_449,
+._left_150r3_915 ._footer_150r3_215,
+._left_150r3_915 ._actions_150r3_815 {
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+}
+
+._center_150r3_927 {
+  text-align: center;
+}
+._center_150r3_927 ._header_150r3_699,
+._center_150r3_927 ._body_150r3_449,
+._center_150r3_927 ._footer_150r3_215,
+._center_150r3_927 ._actions_150r3_815 {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+._right_150r3_939 {
+  text-align: right;
+}
+._right_150r3_939 ._header_150r3_699,
+._right_150r3_939 ._body_150r3_449,
+._right_150r3_939 ._footer_150r3_215,
+._right_150r3_939 ._actions_150r3_815 {
+  align-items: flex-end;
+  justify-content: flex-end;
+  text-align: right;
+}
+
+._clickable_150r3_218 {
+  cursor: pointer;
+  transition: transform var(--transition-default), box-shadow var(--transition-default);
+}
+._clickable_150r3_218:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--box-shadow-medium);
+}
+._clickable_150r3_218:focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 3px;
+  box-shadow: 0 0 0 4px rgba(51, 51, 51, 0.2);
+}
+@media (width <= 479.98px) {
+  ._clickable_150r3_218:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--box-shadow-light);
+  }
+}
+
+._card_150r3_205 :focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._card_150r3_205,
+  ._card_150r3_205 * {
+    animation: none !important;
+    transition: none !important;
+  }
+  ._clickable_150r3_218:hover {
+    transform: none !important;
+    box-shadow: none !important;
+  }
+}
+@media (hover: none) {
+  ._clickable_150r3_218:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}