/* ============================================================
   SRIBLO — Design Tokens
   Auto-extracted from Figma Variable Collection & Text Styles
   Font: TT Firs Neue (Regular / Medium / DemiBold)
   ============================================================ */


/* ============================================================
   1. FONT FACE
   TT Firs Neue — платний шрифт від TypeType.
   Розкоментуй та замінити шляхи на реальні файли.
   ============================================================ */

/*
@font-face {
  font-family: 'TT Firs Neue';
  src: url('/new/fonts/TTFirsNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Firs Neue';
  src: url('/new/fonts/TTFirsNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TT Firs Neue';
  src: url('/new/fonts/TTFirsNeue-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/


/* ============================================================
   2. COLOR TOKENS
   Джерело: Figma → Variable Collection → Mode 1
   ============================================================ */

:root {

  /* — Base palette — */
  --color-white:        #FAFAFA;   /* r:0.98 g:0.98 b:0.98                  */
  --color-dark:         #080808;   /* r:0.03 g:0.03 b:0.03                  */
  --color-gold:         #FCD468;   /* Badge НОВИНКА                         */
  --color-green:        #0D9B3C;   /* Badge ГРАВІЮВАННЯ                     */
  --color-red:          #D01F1F;   /* Sale ціна / знижка                    */

  /* — Greys on dark backgrounds — */
  --color-d-darkgrey:   #8A8C8F;   /* Secondary text on dark                */
  --color-d-grey:       #BEBFC0;   /* Tertiary text on dark                 */

  /* — Greys on white backgrounds — */
  --color-w-darkgrey:   #737373;   /* Secondary text on light               */
  --color-w-grey:       #404040;   /* Tertiary / muted text on light        */

  /* — Utility — */
  --color-placeholder:  #A6A6A6;
  --color-border-a:     rgba(8, 8, 8, 0.04);    /* Subtle separator         */
  --color-border-b:     rgba(8, 8, 8, 0.08);    /* Standard border          */
  --color-section-bg:   rgba(250, 250, 250, 0.50);

  /* — Semantic aliases — */
  --color-text-primary:      var(--color-dark);
  --color-text-secondary:    var(--color-w-darkgrey);
  --color-text-tertiary:     var(--color-w-grey);
  --color-text-placeholder:  var(--color-placeholder);
  --color-text-inverted:     var(--color-white);
  --color-text-sale:         var(--color-red);

  --color-bg-page:           var(--color-white);
  --color-bg-section:        var(--color-section-bg);
  --color-bg-hero:           var(--color-dark);
  --color-bg-footer:         var(--color-dark);
  --color-bg-image:          #F0F0F0;

  --color-border:            var(--color-border-b);
  --color-border-subtle:     var(--color-border-a);
  --color-border-focus:      var(--color-dark);

  /* — Badge — */
  --color-badge-new-bg:           var(--color-gold);
  --color-badge-new-text:         var(--color-dark);
  --color-badge-engraving-bg:     var(--color-green);
  --color-badge-engraving-text:   var(--color-white);
  --color-badge-sale-bg:          var(--color-red);
  --color-badge-sale-text:        var(--color-white);

  /* — Button — */
  --color-btn-primary-bg:    var(--color-dark);
  --color-btn-primary-text:  var(--color-white);
  --color-btn-primary-hover: #1A1A1A;


  /* ============================================================
     3. TYPOGRAPHY TOKENS
     Джерело: Figma → Text Styles
     Font: TT Firs Neue
     Weights: 400 Regular | 500 Medium | 600 DemiBold
     ============================================================ */

  --font-family:          'TT Firs Neue', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-demibold: 600;

  /* Display */
  --display-hero-size:        104px;
  --display-hero-lh:          1;
  --display-hero-weight:      var(--font-weight-demibold);
  --display-hero-transform:   uppercase;

  /* Headings */
  --heading-h1-size:          56px;
  --heading-h1-lh:            1;
  --heading-h1-weight:        var(--font-weight-demibold);
  --heading-h1-transform:     uppercase;

  --heading-h2-size:          48px;
  --heading-h2-lh:            1;
  --heading-h2-weight:        var(--font-weight-demibold);
  --heading-h2-transform:     uppercase;

  --heading-h3-size:          40px;
  --heading-h3-lh:            1;
  --heading-h3-weight:        var(--font-weight-demibold);
  --heading-h3-transform:     uppercase;

  --heading-h4-size:          24px;
  --heading-h4-lh:            1.4;
  --heading-h4-weight:        var(--font-weight-demibold);

  --heading-h5-size:          20px;
  --heading-h5-lh:            1.4;
  --heading-h5-weight:        var(--font-weight-demibold);

  /* UI */
  --ui-large-size:             24px;
  --ui-large-lh:               1.4;
  --ui-large-weight:           var(--font-weight-medium);

  --ui-default-large-size:     20px;
  --ui-default-large-lh:       1.4;
  --ui-default-large-weight:   var(--font-weight-medium);

  --ui-default-size:           16px;
  --ui-default-lh:             1.4;
  --ui-default-weight:         var(--font-weight-medium);

  --ui-small-size:             14px;
  --ui-small-lh:               1.4;
  --ui-small-weight:           var(--font-weight-medium);

  /* Body */
  --body-large-size:              24px;
  --body-large-lh:                1.4;
  --body-large-weight:            var(--font-weight-regular);

  --body-default-large-size:      20px;
  --body-default-large-lh:        1.4;
  --body-default-large-weight:    var(--font-weight-regular);

  --body-emphasis-size:           16px;
  --body-emphasis-lh:             1.4;
  --body-emphasis-weight:         var(--font-weight-demibold);

  --body-default-size:            16px;
  --body-default-lh:              1.4;
  --body-default-weight:          var(--font-weight-regular);

  --body-emphasis-small-size:     14px;
  --body-emphasis-small-lh:       1.4;
  --body-emphasis-small-weight:   var(--font-weight-demibold);

  --body-small-size:              14px;
  --body-small-lh:                1.4;
  --body-small-weight:            var(--font-weight-regular);

}


/* ============================================================
   4. TYPOGRAPHY UTILITY CLASSES
   ============================================================ */

.display-hero {
  font-family:    var(--font-family);
  font-size:      var(--display-hero-size);
  line-height:    var(--display-hero-lh);
  font-weight:    var(--display-hero-weight);
  text-transform: var(--display-hero-transform);
}

.heading-h1 {
  font-family:    var(--font-family);
  font-size:      var(--heading-h1-size);
  line-height:    var(--heading-h1-lh);
  font-weight:    var(--heading-h1-weight);
  text-transform: var(--heading-h1-transform);
}

.heading-h2 {
  font-family:    var(--font-family);
  font-size:      var(--heading-h2-size);
  line-height:    var(--heading-h2-lh);
  font-weight:    var(--heading-h2-weight);
  text-transform: var(--heading-h2-transform);
}

.heading-h3 {
  font-family:    var(--font-family);
  font-size:      var(--heading-h3-size);
  line-height:    var(--heading-h3-lh);
  font-weight:    var(--heading-h3-weight);
  text-transform: var(--heading-h3-transform);
}

.heading-h4 {
  font-family: var(--font-family);
  font-size:   var(--heading-h4-size);
  line-height: var(--heading-h4-lh);
  font-weight: var(--heading-h4-weight);
}

.heading-h5 {
  font-family: var(--font-family);
  font-size:   var(--heading-h5-size);
  line-height: var(--heading-h5-lh);
  font-weight: var(--heading-h5-weight);
}

.ui-large         { font-family: var(--font-family); font-size: var(--ui-large-size);         line-height: var(--ui-large-lh);         font-weight: var(--ui-large-weight);         }
.ui-default-large { font-family: var(--font-family); font-size: var(--ui-default-large-size); line-height: var(--ui-default-large-lh); font-weight: var(--ui-default-large-weight); }
.ui-default       { font-family: var(--font-family); font-size: var(--ui-default-size);       line-height: var(--ui-default-lh);       font-weight: var(--ui-default-weight);       }
.ui-small         { font-family: var(--font-family); font-size: var(--ui-small-size);         line-height: var(--ui-small-lh);         font-weight: var(--ui-small-weight);         }

.body-large          { font-family: var(--font-family); font-size: var(--body-large-size);           line-height: var(--body-large-lh);           font-weight: var(--body-large-weight);           }
.body-default-large  { font-family: var(--font-family); font-size: var(--body-default-large-size);   line-height: var(--body-default-large-lh);   font-weight: var(--body-default-large-weight);   }
.body-emphasis       { font-family: var(--font-family); font-size: var(--body-emphasis-size);        line-height: var(--body-emphasis-lh);        font-weight: var(--body-emphasis-weight);        }
.body-default        { font-family: var(--font-family); font-size: var(--body-default-size);         line-height: var(--body-default-lh);         font-weight: var(--body-default-weight);         }
.body-emphasis-small { font-family: var(--font-family); font-size: var(--body-emphasis-small-size);  line-height: var(--body-emphasis-small-lh);  font-weight: var(--body-emphasis-small-weight);  }
.body-small          { font-family: var(--font-family); font-size: var(--body-small-size);           line-height: var(--body-small-lh);           font-weight: var(--body-small-weight);           }


/* ============================================================
   5. BADGE COMPONENTS
   ============================================================ */

.badge {
  display:      inline-flex;
  align-items:  center;
  padding:      2px 8px;
  border-radius: 2px;
  font-family:  var(--font-family);
  font-size:    var(--ui-small-size);
  line-height:  var(--ui-small-lh);
  font-weight:  var(--ui-small-weight);
  white-space:  nowrap;
}

.badge--new       { background-color: var(--color-badge-new-bg);       color: var(--color-badge-new-text);       }
.badge--engraving { background-color: var(--color-badge-engraving-bg); color: var(--color-badge-engraving-text); }
.badge--sale      { background-color: var(--color-badge-sale-bg);      color: var(--color-badge-sale-text);      }


/* ============================================================
   6. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
  /* border: 1px solid red; */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:    var(--font-family);
  font-size:      var(--body-default-size);
  line-height:    var(--body-default-lh);
  font-weight:    var(--body-default-weight);
  color:          var(--color-text-primary);
  background-color: var(--color-bg-page);
  background-image: url('../img/bg-page.jpg');
  background-repeat: repeat;
  background-position: top center;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: auto;
}

img, video {
  max-width: 100%;
  display:   block;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-family);
  cursor:      pointer;
  border:      none;
  background:  none;
}

ul, ol {
  list-style: none;
}