/* ── Barlow @font-face ──────────────────────────────── */
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Thin.ttf')            format('truetype'); font-weight: 100; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-ThinItalic.ttf')      format('truetype'); font-weight: 100; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-ExtraLight.ttf')      format('truetype'); font-weight: 200; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-ExtraLightItalic.ttf')format('truetype'); font-weight: 200; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Light.ttf')           format('truetype'); font-weight: 300; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-LightItalic.ttf')     format('truetype'); font-weight: 300; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Regular.ttf')         format('truetype'); font-weight: 400; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Italic.ttf')          format('truetype'); font-weight: 400; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Medium.ttf')          format('truetype'); font-weight: 500; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-MediumItalic.ttf')    format('truetype'); font-weight: 500; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-SemiBold.ttf')        format('truetype'); font-weight: 600; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-SemiBoldItalic.ttf')  format('truetype'); font-weight: 600; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Bold.ttf')            format('truetype'); font-weight: 700; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-BoldItalic.ttf')      format('truetype'); font-weight: 700; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-ExtraBold.ttf')       format('truetype'); font-weight: 800; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-Black.ttf')           format('truetype'); font-weight: 900; font-style: normal;  font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow/Barlow-BlackItalic.ttf')     format('truetype'); font-weight: 900; font-style: italic;  font-display: swap; }

/* ── Variables ─────────────────────────────────────── */
:root {
  --color-primary:     #0caec4;
  --color-secondary:   #ffffff;
  --color-tertiary:    #3a2c7a;
  --color-quaternary:  #f16c6d;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif;
  color: #1a1a1a;
  background-color: var(--color-secondary);
}

/* ── Language switcher ──────────────────────────────── */
.lang-active {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  transition: opacity 0.15s ease-in-out;
}

.lang-left{
    border-radius: 1rem 0rem 0rem 1rem;
}
.lang-right{
    border-radius: 0rem 1rem 1rem 0rem;
}

.lang-inactive {
  color: #000000;
  background-color: #e7e8e9;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.65rem;
  transition: color 0.15s ease-in-out;
}

.lang-inactive:hover {
  color: var(--color-primary);
}