/* ============================================================
   GLOBAL.CSS — Design Tokens, Reset, Typography
   Luis Praxmarer Portfolio 2026
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Colors */
  --color-black:            #141414;
  --color-white:            #ffffff;
  --color-bright:           #d7d8d9;
  --color-bright-font:      #8b8c8c;
  --color-gray-font:        #505153;
  --color-dark-gray-border: #323334;
  --color-highlight-1:      #ffd000;
  --color-highlight-2:      #ff4000;
  --color-overlay-dark:     rgba(0, 0, 0, 0.2);

  /* Typography — Font */
  --font-primary:          'DM Sans', sans-serif;
  --font-opsz:             "opsz" 14;
  --font-weight-regular:   400;
  --font-weight-medium:    500;

  /* Typography — Type Scale
     Format: size / line-height
     H1       80 / 100%
     H2       48 / 105%
     H3       36 / 110%
     P Lead   24 / 120%
     P Normal 16 / 150%
     P Medium 16 / 150%  (weight 500)
     P Small  14 / 150%
     P XSmall 12 / 150%
  */
  --text-h1-size:          80px;
  --text-h1-weight:        400;
  --text-h1-line-height:   1.0;
  --text-h1-letter-spacing: 0;

  --text-h2-size:          48px;
  --text-h2-weight:        400;
  --text-h2-line-height:   1.05;
  --text-h2-letter-spacing: 0;

  --text-h3-size:          36px;
  --text-h3-weight:        400;
  --text-h3-line-height:   1.1;
  --text-h3-letter-spacing: 0;

  --text-lead-size:        24px;
  --text-lead-weight:      400;
  --text-lead-line-height: 1.2;
  --text-lead-letter-spacing: 0;

  --text-body-size:        16px;
  --text-body-weight:      400;
  --text-body-line-height: 1.5;
  --text-body-letter-spacing: 0;

  --text-body-medium-size:        16px;
  --text-body-medium-weight:      500;
  --text-body-medium-line-height: 1.5;
  --text-body-medium-letter-spacing: 0;

  --text-small-size:       14px;
  --text-small-weight:     400;
  --text-small-line-height: 1.5;
  --text-small-letter-spacing: 0;

  --text-xsmall-size:      12px;
  --text-xsmall-weight:    400;
  --text-xsmall-line-height: 1.5;
  --text-xsmall-letter-spacing: 0;

  /* Grid — Desktop */
  --grid-columns:       12;
  --grid-margin:        56px;
  --grid-gutter:        16px;
  --grid-text-width-1:  880px;
  --grid-text-width-2:  656px;

  /* Grid — Mobile */
  --grid-columns-mobile: 4;
  --grid-margin-mobile:  20px;
  --grid-gutter-mobile:  16px;

  /* Spacing */
  --space-4:         4px;
  --space-8:         8px;
  --space-16:        16px;
  --space-small:     24px;
  --space-normal:    40px;
  --space-basic:     56px;   /* = grid margin */
  --space-padding-1: 96px;
  --space-large:     144px;
  --space-xl:        192px;

  /* Spacing aliases (backwards compat) */
  --space-2:   2px;
  --space-20:  20px;
  --space-24:  24px;
  --space-40:  40px;
  --space-56:  56px;
  --space-72:  72px;

  /* Components */
  --nav-height:        72px;
  --hero-height:       100vh;
  --toggle-btn-w:      96px;
  --toggle-btn-h:      52px;
  --bubble-size:       120px;
  --radius-round:      9999px;

  /* Transitions */
  --ease-smooth:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:     150ms;
  --duration-med:      300ms;
  --duration-slow:     600ms;
  --duration-slide:    700ms;
}

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

html {
  scroll-behavior: auto; /* manual scroll control */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  color: var(--color-black);
  background: var(--color-black);
  overflow: hidden; /* home controls its own scroll */
  cursor: none;     /* custom cursor via bubble */
}

/* Content pages (page-work incl. 404.html, page-about) show the normal OS
   cursor. Home (no body class) keeps cursor:none for its custom bubble. */
body.page-work,
body.page-about {
  cursor: auto;
}

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

ul, ol {
  list-style: none;
}

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

button {
  background: none;
  border: none;
  cursor: none;
  font: inherit;
  color: inherit;
}

/* ── Typography Classes ──────────────────────────────────── */
.t-h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-h3 {
  font-family: var(--font-primary);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-lead {
  font-family: var(--font-primary);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-body {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-body-medium {
  font-family: var(--font-primary);
  font-size: var(--text-body-medium-size);
  font-weight: var(--text-body-medium-weight);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-small {
  font-family: var(--font-primary);
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
  line-height: var(--text-small-line-height);
  letter-spacing: var(--text-small-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

.t-xsmall {
  font-family: var(--font-primary);
  font-size: var(--text-xsmall-size);
  font-weight: var(--text-xsmall-weight);
  line-height: var(--text-xsmall-line-height);
  letter-spacing: var(--text-xsmall-letter-spacing);
  font-variation-settings: var(--font-opsz);
}

/* ── Utilities ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ── Mobile (≤768px) ─────────────────────────────────────────
   Type-Scale runtergerechnet, Hierarchie bleibt gleich.
   Seiten-Margin 16px, Gutter 16px, kleinere Vertikal-Rhythmen.
   Tokens werden überschrieben → kaskadiert in alle Seiten. */
@media (max-width: 768px) {
  :root {
    --text-h1-size:          44px;
    --text-h1-line-height:   1.05;
    --text-h2-size:          32px;
    --text-h3-size:          26px;
    --text-h3-line-height:   1.15;
    --text-lead-size:        20px;
    /* body / small / xsmall bleiben (16 / 14 / 12) */

    --grid-margin:    16px;
    --grid-gutter:    16px;

    /* grosse Vertikal-Abstände an Mobile anpassen */
    --space-xl:        96px;
    --space-large:     80px;
    --space-padding-1: 48px;
  }

  /* Touch: kein Custom-Cursor */
  body { cursor: auto; }
  button { cursor: pointer; }
}

/* Scroll-Lock wenn Burger-Menü offen */
body.menu-open { overflow: hidden; }

/* ── Reduced Motion (A11y) ───────────────────────────────── */
/* Respektiert „Bewegung reduzieren": Animationen/Transitions quasi
   aus, kein Smooth-Scroll. Autoplay-Videos werden per JS pausiert
   (home.js / components.js zeigen dann nur das Poster). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}