/* ==========================================================================
   Qtents Design System
   Design tokens, reset, typography, buttons and layout utilities.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* -- 1.1 Color Palette ------------------------------------------------- */
  --orange: #EF7C00;
  --black: #000000;
  --dark-grey: #31363b;
  --white: #FFFFFF;
  --light-grey: #F7F7F7;
  --medium-grey: #e8e8e8;

  /* -- 1.2 Semantic Colors ------------------------------------------------ */
  --color-brand: var(--orange);
  --color-text: var(--black);
  --color-text-muted: #555;
  --color-text-inverse: var(--white);
  --color-bg: var(--white);
  --color-bg-alt: var(--light-grey);
  --color-bg-dark: var(--dark-grey);
  --color-border: #e0e0e0;

  /* -- 1.3 Font Families -------------------------------------------------- */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* -- 1.4 Font Weights --------------------------------------------------- */
  --weight-medium: 500;
  --weight-bold: 700;

  /* -- 1.5 Line Heights --------------------------------------------------- */
  --lh-none: 1;
  --lh-normal: 1.7;
  --lh-relaxed: 1.8;

  /* -- 1.6 Font Sizes ----------------------------------------------------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;

  /* Fluid heading sizes (390px / 24.38rem -> 1500px / 93.75rem viewport) */
  --text-h1: clamp(1.88rem, calc(0.018019 * (100vw - 24.38rem) + 1.88rem), 3.13rem);  /* 30px -> 50px */
  --text-h2: clamp(1.88rem, calc(0.008937 * (100vw - 24.38rem) + 1.88rem), 2.50rem);  /* 30px -> 40px */
  --text-h3: clamp(1.56rem, calc(0.004613 * (100vw - 24.38rem) + 1.56rem), 1.88rem);  /* 25px -> 30px */

  /* -- 1.7 Spacing Scale (fluid responsive) ------------------------------
     Multiplier system: D1 = base unit (20px at 1500px, ~14px at 390px)
     Min viewport: 390px (24.38rem) / Max viewport: 1500px (93.75rem)   */

  --space-d001: 0.13rem;
  --space-d025: clamp(0.22rem, calc(0.001297 * (100vw - 24.38rem) + 0.22rem), 0.31rem);
  --space-d05:  clamp(0.44rem, calc(0.002739 * (100vw - 24.38rem) + 0.44rem), 0.63rem);
  --space-d075: clamp(0.66rem, calc(0.004036 * (100vw - 24.38rem) + 0.66rem), 0.94rem);
  --space-d1:   clamp(0.88rem, calc(0.005334 * (100vw - 24.38rem) + 0.88rem), 1.25rem);
  --space-d125: clamp(1.09rem, calc(0.006775 * (100vw - 24.38rem) + 1.09rem), 1.56rem);
  --space-d15:  clamp(1.31rem, calc(0.008217 * (100vw - 24.38rem) + 1.31rem), 1.88rem);
  --space-d2:   clamp(1.75rem, calc(0.010808 * (100vw - 24.38rem) + 1.75rem), 2.50rem);
  --space-d25:  clamp(2.19rem, calc(0.013549 * (100vw - 24.38rem) + 2.19rem), 3.13rem);
  --space-d3:   clamp(2.63rem, calc(0.016145 * (100vw - 24.38rem) + 2.63rem), 3.75rem);
  --space-d5:   clamp(4.38rem, calc(0.026960 * (100vw - 24.38rem) + 4.38rem), 6.25rem);

  /* Semantic spacing */
  --section-pad: var(--space-d3);
  --section-margin: var(--space-d3);
  --content-gap: var(--space-d15);
  --grid-gap: var(--space-d3);

  /* -- 1.8 Border Radius -------------------------------------------------- */
  --radius-pill: 9999px;

  /* -- 1.9 Layout --------------------------------------------------------- */
  --container-width: 1500px;
  --container-wide: 1585px;

  /* -- 1.10 Shadows ------------------------------------------------------- */
  --shadow-header: 5px 20px 75px 0px rgba(0, 0, 0, 0.15);
  --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.1);
  --shadow-nav-mobile: -4px 0 20px rgba(0, 0, 0, 0.1);
  --shadow-lang: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* -- 1.11 Transitions --------------------------------------------------- */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 400ms;
  --duration-image: 500ms;
  --ease-default: ease;
  --transition-base: all var(--duration-normal) var(--ease-default);
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

ul, ol {
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--lh-none);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.qt-container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-d2);
  padding-right: var(--space-d2);
}

.qt-section-pad {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.qt-section-bg {
  margin-top: var(--section-margin);
  margin-bottom: var(--section-margin);
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  padding: var(--space-d075) var(--space-d15);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  line-height: var(--lh-none);
}

.btn--primary {
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background-color: var(--color-text);
}

.btn--secondary {
  background-color: var(--color-text);
  color: var(--color-text-inverse);
}

.btn--secondary:hover {
  background-color: var(--color-brand);
}

.btn--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.btn--dark:hover {
  background-color: var(--color-text);
}

.btn--lg {
  padding: var(--space-d1) var(--space-d15);
  font-size: var(--text-xs);
}