feat: update border styles to use CSS variables for consistency across components

src/app/app.scss

@@ -17,7 +17,7 @@
 .tenant-status__card {
   width: min(100%, 34rem);
   padding: 2rem;
-  border: 1px solid rgba(32, 32, 32, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 1.5rem;
   background-color: rgba(255, 255, 255, 0.92);
   box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1);
@@ -55,7 +55,7 @@
 .tenant-status__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.08);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary);
   border-radius: 999px;
   animation: tenant-status-spin 0.8s linear infinite;

src/app/core/layout/store-layout/store-footer/store-footer.component.scss

@@ -46,7 +46,7 @@
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
-  border: 1px dashed rgba(255, 255, 255, 0.35);
+  border: 1px dashed var(--border-color);
   border-radius: 999px;
   font-size: 1.05rem;
   font-weight: 700;
@@ -134,7 +134,7 @@
     order: 2;
     grid-column: 1 / -1;
     width: 100%;
-    border-top: 1px solid rgba(255, 255, 255, 0.3);
+    border-top: 1px solid var(--border-color);
   }
 
   .store-layout__brand-column,

src/app/core/layout/store-layout/store-header/store-header.component.scss

@@ -1,11 +1,10 @@
 .store-layout__header {
   color: #ffffff;
   background-color: transparent;
-  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .store-layout__header-main {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .store-layout__brand-slot {
@@ -77,7 +76,7 @@
 
 .store-layout__search-input {
   color: #666666;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: rgba(255, 255, 255, 0.96);
 }
 
@@ -86,21 +85,21 @@
 }
 
 .store-layout__search-input:focus {
-  border-color: #cccccc;
+  border-color: var(--border-color);
   box-shadow: none;
   outline: none;
 }
 
 .store-layout__search-button {
   color: #a0a0a0;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: rgba(255, 255, 255, 0.96);
 }
 
 .store-layout__search-button:hover,
 .store-layout__search-button:focus-visible {
   color: #8a8a8a;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   background-color: #ffffff;
 }
 
@@ -172,7 +171,7 @@
   }
 
   .store-layout__mobile-separator {
-    border-color: #dddddd;
+    border-color: var(--border-color);
     opacity: 1;
     margin: 0 -1rem;
   }

src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss

@@ -10,7 +10,7 @@
 .user-dropdown {
   display: grid;
   background: #ffffff;
-  border: 1px solid rgba(32, 32, 32, 0.1);
+  border: 1px solid var(--border-color);
   border-radius: 8px;
   box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
   padding: 0.75rem;

src/app/core/layout/store-layout/store-layout.component.scss

@@ -29,7 +29,7 @@
   z-index: 1050;
   background-color: #ffffff;
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border-color);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   animation: store-layout-slide-down 0.2s ease-out;

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -77,7 +77,7 @@ h1 {
 
 .modal-showcase__result {
   padding: 0.875rem 1rem;
-  border: 1px dashed rgba(32, 32, 32, 0.14);
+  border: 1px dashed var(--border-color);
   border-radius: 0.875rem;
   background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
   color: #495057;
@@ -231,7 +231,7 @@ h1 {
       justify-content: center;
       height: 120px;
       border-radius: 8px;
-      border: 1px solid #dee2e6;
+      border: 1px solid var(--border-color);
       padding: 1rem;
       overflow: hidden;
       box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -281,7 +281,7 @@ h1 {
     display: flex;
     flex-direction: column;
     border-radius: 8px;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border-color);
     overflow: hidden;
     background-color: #ffffff;
     transition:
@@ -296,7 +296,7 @@ h1 {
     &__preview {
       height: 80px;
       width: 100%;
-      border-bottom: 1px solid #dee2e6;
+      border-bottom: 1px solid var(--border-color);
       transition: opacity 0.2s ease;
 
       &:hover {
@@ -337,7 +337,7 @@ h1 {
     background-color: #eaeaea;
     padding: 1.5rem;
     border-radius: 8px;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--border-color);
   }
 
   &__row {

src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss

@@ -54,7 +54,7 @@
   }
 
   &__text-option {
-    border: 1px solid #dcdcdc;
+    border: 1px solid var(--border-color);
     background: #ffffff;
     color: #666666;
     transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;

src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 :host(:last-child) {
@@ -24,7 +24,7 @@
   aspect-ratio: 4 / 3;
   border-radius: 5px 0 0 5px;
   background-color: #ffffff;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 
   img {

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -23,7 +23,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem 0;
-  border-bottom: 1px solid #DDDDDD;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .skeleton-item:last-child {

src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss

@@ -27,7 +27,7 @@
 .tickets-list__generating-spinner {
   width: 24px;
   height: 24px;
-  border: 3px solid #dce8e0;
+  border: 3px solid var(--border-color);
   border-top-color: var(--tenant-primary, #009933);
   border-radius: 50%;
   animation: tickets-spinner 0.75s linear infinite;
@@ -39,7 +39,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__header--inactive {
@@ -89,7 +89,7 @@
 }
 
 .tickets-list app-ticket {
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__empty {
@@ -104,7 +104,7 @@
   align-items: center;
   justify-content: space-between;
   padding-bottom: 12px;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__skeleton-selection,
@@ -130,7 +130,7 @@
   align-items: center;
   gap: 16px;
   padding: 16px 0;
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .tickets-list__skeleton-check,

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -64,7 +64,7 @@
 .checkout-page__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.08);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary);
   border-radius: 50%;
   animation: checkout-page-spin 0.8s linear infinite;

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -15,7 +15,7 @@
 
 .faq-page__empty {
   padding: 1rem 0;
-  border-bottom: 1px solid #dedede;
+  border-bottom: 1px solid var(--border-color);
   color: #888888;
   font-size: 0.8125rem;
 }

src/app/features/store/pages/login-page/login-page.component.scss

@@ -31,6 +31,6 @@
 .login-page__divider-dot {
   width: 16px;
   height: 16px;
-  border-color: #d9d9d9 !important;
+  border-color: var(--border-color) !important;
   background-color: #ffffff;
 }

src/app/features/store/pages/product-detail-page/product-detail-page.component.scss

@@ -14,7 +14,7 @@
   }
 
   &__divider {
-    border-top: 1px solid #e6e6e6;
+    border-top: 1px solid var(--border-color);
   }
 
   &__title {
@@ -25,7 +25,7 @@
   }
 
   &__title-price-divider {
-    border-top: 1px solid #e6e6e6;
+    border-top: 1px solid var(--border-color);
   }
 
   &__price-group {

src/app/shared/components/accordion/accordion.component.scss

@@ -4,7 +4,7 @@
 }
 
 .accordion {
-  --bs-accordion-border-color: #dedede;
+  --bs-accordion-border-color: var(--border-color);
   --bs-accordion-border-radius: 0;
   --bs-accordion-inner-border-radius: 0;
   --bs-accordion-bg: transparent;

src/app/shared/components/cart-item/cart-item.component.scss

@@ -43,7 +43,7 @@
   aspect-ratio: 1 / 1;
   border-radius: 5px 0 0 5px;
   background-color: #ffffff;
-  border: 1px solid #eaeaea;
+  border: 1px solid var(--border-color);
   overflow: hidden;
 
   img {

src/app/shared/components/global-loading/global-loading.component.scss

@@ -12,7 +12,7 @@
 .global-loading__spinner {
   width: 3rem;
   height: 3rem;
-  border: 0.25rem solid rgba(32, 32, 32, 0.12);
+  border: 0.25rem solid var(--border-color);
   border-top-color: var(--tenant-primary, #6376f3);
   border-radius: 50%;
   animation: global-loading-spin 0.75s linear infinite;

src/app/shared/components/input/input.component.scss

@@ -23,7 +23,7 @@
   min-height: 40px;
   padding: 0.625rem 1rem;
   border-radius: 5px;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   color: #666666;
   font-size: 15px;
   font-weight: 400;

src/app/shared/components/product-row-card/product-row-card.component.scss

@@ -10,7 +10,7 @@
   gap: 2rem;
   width: 100%;
   padding: 2rem 0;
-  border-bottom: 1px solid #e3e3e3;
+  border-bottom: 1px solid var(--border-color);
   background: transparent;
 
   &__title {
@@ -41,7 +41,7 @@
 
   &__actions {
     display: grid;
-    grid-template-columns: minmax(0, auto) 160px;
+    grid-template-columns: minmax(0, auto) minmax(0, 230px);
     align-items: stretch;
     gap: 0.75rem 2.5rem;
   }
@@ -54,6 +54,11 @@
     gap: 0.5rem;
   }
 
+  &__buttons {
+    width: 100%;
+    max-width: 230px;
+  }
+
   &__controls {
     display: flex;
     align-items: center;
@@ -62,8 +67,6 @@
   }
 
   &__btn-wrapper {
-    min-width: 160px;
-
     app-button {
       display: block;
       width: 100%;
@@ -83,26 +86,8 @@
       min-width: 0;
     }
 
-    &__actions,
-    &__summary,
-    &__buttons {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
     &__actions {
       flex: 0 0 auto;
-      gap: 0.75rem;
-    }
-
-    &__summary,
-    &__buttons {
-      gap: 0.5rem;
-    }
-
-    &__price {
-      align-self: center;
     }
 
     &__selectors {
@@ -119,9 +104,6 @@
       }
     }
 
-    &__btn-wrapper {
-      min-width: 140px;
-    }
   }
 }
 
@@ -131,7 +113,7 @@
     flex-direction: column;
 
     &__actions {
-      grid-template-columns: minmax(0, 1fr) 160px;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
     }
   }
 }

src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss

@@ -19,7 +19,7 @@
   padding: 30px 20px;
   overflow: hidden;
   background-color: #ffffff;
-  border: 1px solid #dedede;
+  border: 1px solid var(--border-color);
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -3,7 +3,7 @@
 }
 
 .quantity-selector {
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--border-color);
   width: 78px;
   height: 40px;
   min-height: 40px;
@@ -42,7 +42,7 @@
     width: 62px;
     height: 28px;
     min-height: 28px;
-    border-color: #cccccc;
+    border-color: var(--border-color);
     background-color: #ffffff;
 
     .quantity-selector__button {

src/app/shared/components/variant-selector/variant-selector.component.scss

@@ -19,7 +19,7 @@
   max-width: none;
   height: 38px;
   color: #666666;
-  border-color: #cccccc;
+  border-color: var(--border-color);
   font-size: 14px;
   cursor: pointer;
 

src/styles.scss

@@ -8,6 +8,9 @@
 
 :root,
 app-root {
+  --border-color: #dddddd;
+  --bs-border-color: var(--border-color);
+  --bs-border-color-translucent: var(--border-color);
   --bs-body-font-family: 'Gotham', sans-serif;
   --color-primary: var(--tenant-primary);
   --color-primary-rgb: var(--tenant-primary-rgb);