/* ============================================================
   futuretouch.cz — base.css
   Reset, design tokens, typography, fluid scaling.
   1rem = 10px @ 1920px viewport, 16px below 1024px (mobile reset).
   ============================================================ */

/* ----- Reset ----- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ----- Design tokens (Figma get_variable_defs) ----- */
:root {
  /* Colors */
  --color-bg:                #100f0f;        /* Black — page bg */
  --color-bg-soft:           #1a1717;        /* slight lift for gradients */
  --color-fg:                #f1f1f1;        /* White — body text */
  --color-fg-50:             rgba(241, 241, 241, 0.5);
  --color-muted:             #f1e9db80;      /* Perex — 60% warm white */
  --color-accent:            #d8a058;        /* Gold — links, brand */
  --color-accent-pressed:    #a67638;        /* Button Gold — active/pressed */
  --color-accent-glow:       #d8a05838;      /* Gold Glow — hover bg */
  --color-accent-subtle:     #d8a05814;      /* Transparent Gold — very subtle */
  --color-glass-i:           #f1e9db08;      /* Transparent I (rgba 0.03) — glass cards */
  --color-glass-ii:          #f1e9db08;      /* Transparent II (rgba 0.03) — borders */
  --color-border:            rgba(241, 233, 219, 0.08);
  --color-line:              rgba(241, 233, 219, 0.05);   /* tenké separator lines (legend, features) — jemnější než border */

  /* Logo gradient (Figma node 137:670) */
  --gradient-logo: linear-gradient(123.23deg, #f3a847 6.47%, #ffd188 49.99%, #c98d40 102.39%);
  /* Display headline gradient (Figma node 3:348) */
  --gradient-display: linear-gradient(180deg, #f1f1f1 0%, rgba(241, 241, 241, 0.5) 100%);
  /* Marquee text gradient (Figma node 264:1154) — zlatá paleta horizontálně */
  --gradient-marquee: linear-gradient(90deg, #f3a847 0%, #ffd188 50%, #c98d40 100%);

  /* Radii */
  --radius-main: 1.2rem;     /* 12px @ 1920 */
  --radius-mini: 0.6rem;     /* 6px */

  /* Effects */
  --blur-glass: 1rem;        /* 10px backdrop-blur per Figma info-boxy */

  /* Spacing scale (rem, 1rem = 10px @ 1920) */
  --space-1:  0.4rem;        /*  4px */
  --space-2:  0.8rem;        /*  8px */
  --space-3:  1.0rem;        /* 10px */
  --space-4:  1.6rem;        /* 16px */
  --space-5:  2.0rem;        /* 20px */
  --space-6:  3.0rem;        /* 30px */
  --space-7:  4.0rem;        /* 40px */
  --space-8:  6.5rem;        /* 65px — page margin */
  --space-9:  10rem;         /* 100px — section gap */

  /* Layout — fixed pixel caps (nezvětšují se s fluid rem na ultrawide) */
  --margin: var(--space-8);
  --container-max: 1920px;   /* body / page-bg outer cap */
  --content-max: 1410px;     /* .grid-container inner content cap */

  /* Typography */
  --font-display: 'Overused Grotesk', system-ui, sans-serif;
  --font-body:    'Overused Grotesk', system-ui, sans-serif;
  --font-logo:    'Uniforma Medium', 'Overused Grotesk', system-ui, sans-serif;

  /* Type scale — fluid via rem (1rem = 10px @ 1920) */
  --font-size-display: 10.6rem;  /* 106px — HP hero */
  --font-size-h1:       9.6rem;  /* 96px — Detail page title */
  --font-size-h2:       5.0rem;  /* 50px — section headlines */
  --font-size-h3:       2.7rem;  /* 27px — sub-titles, prices */
  --font-size-h4:       2.2rem;  /* 22px — body large */
  --font-size-body:     1.6rem;  /* 16px — base body */
  --font-size-small:    1.4rem;  /* 14px — captions */
  --font-size-tiny:     1.2rem;  /* 12px — micro text */

  /* Line heights */
  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.7;
}

/* ----- Strict sRGB override -----
   Hex tokeny výše jsou sRGB hodnoty per Figma. Bez explicitního color-space
   je macOS Safari/Chrome na P3 displeji renderuje s mírným posunem (např.
   #f1e9db08 přes #100F0F má matematicky vyjít #171615 ale browser ukáže
   #181616). Strict sRGB notace přes color() funkci to vykreslí pixel-přesně
   s Figma renderem. Hex hodnoty zůstávají jako fallback pro starý prohlížeč
   (Safari < 15.4 / Chrome < 111 / Firefox < 113).
----- */
@supports (color: color(srgb 0 0 0)) {
  :root {
    --color-fg-50:          color(srgb 0.945 0.945 0.945 / 0.5);    /* #f1f1f1 / 50% */
    --color-muted:          color(srgb 0.945 0.914 0.859 / 0.502);  /* #f1e9db / 80 */
    --color-accent-glow:    color(srgb 0.847 0.627 0.345 / 0.22);   /* #d8a058 / 38 */
    --color-accent-subtle:  color(srgb 0.847 0.627 0.345 / 0.078);  /* #d8a058 / 14 */
    --color-glass-i:        color(srgb 0.945 0.914 0.859 / 0.031);  /* #f1e9db / 08 */
    --color-glass-ii:       color(srgb 0.945 0.914 0.859 / 0.031);  /* #f1e9db / 08 */
    --color-border:         color(srgb 0.945 0.914 0.859 / 0.08);   /* rgba 0.08 */
    --color-line:           color(srgb 0.945 0.914 0.859 / 0.05);   /* rgba 0.05 */
  }
}

/* ----- Web fonts -----
   Overused Grotesk variable (free, OFL):
   https://github.com/RandomMaerks/Overused-Grotesk — variable woff2 covers
   all weights 100-900 v jednom souboru (~93KB).
-----  */
@font-face {
  font-family: 'Overused Grotesk';
  src: url('/assets/fonts/OverusedGrotesk-VF.woff2') format('woff2-variations'),
       url('/assets/fonts/OverusedGrotesk-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----- Fluid scaling -----
   1rem = viewportWidth / 192 → 10px @ 1920 (Figma reference).
   Cap na 10px znamená že nad 1920 se font už nezvětšuje (body max-width 1920 = obsah centered).
   Min 5.33px = 1rem při 1024 width (mobile reset přebírá pod 1024). */
html {
  font-size: clamp(5.33px, calc(100vw / 192), 10px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* sticky footer — .site-main vyplní zbytek, patička dolů */
  overflow-x: hidden;
  position: relative;       /* containing block pro absolute children (.page-top-glow) */
  isolation: isolate;       /* stacking context — glow s z-index:-1 jde pod content, ne pod body bg */
}

/* Tablet reset (768–1023) */
@media (max-width: 1023px) {
  html { font-size: 14px; }
  :root {
    --margin: 2rem;
    --font-size-display: 4rem;     /* 56px */
    --font-size-h1:      3.2rem;   /* 45px */
    --font-size-h2:      2.4rem;   /* 34px */
    --font-size-h3:      1.8rem;   /* 25px */
    --font-size-h4:      1.6rem;   /* 22px */
    --font-size-body:    1.05rem;  /* 15px */
    --font-size-small:   0.95rem;
    --font-size-tiny:    0.85rem;
    --space-9: 6rem;     /* 84px (z 100) — kompaktnější section vertikální dech */
    --space-7: 3rem;     /* 42px */
  }
}

/* Mobile (≤600) — ještě o krok menší pro úzké obrazovky */
@media (max-width: 600px) {
  html { font-size: 13px; }
  :root {
    --margin: 1.6rem;
    --font-size-display: 3.4rem;   /* 44px */
    --font-size-h1:      2.6rem;   /* 34px */
    --font-size-h2:      2rem;     /* 26px */
    --font-size-h3:      1.6rem;   /* 21px */
    --font-size-h4:      1.4rem;   /* 18px */
    --font-size-body:    1.1rem;   /* 14px */
    --space-9: 5rem;     /* 65px */
    --space-7: 2.4rem;   /* 31px */
    --space-6: 1.8rem;
  }
}

/* ----- Headings ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

/* Display headline utility — gradient-on-text per HP hero (Figma 3:348) */
.display-headline {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-align: center;
  /* extend box dolů (gradient pak pokryje descendery — "g", "y" atd.) */
  padding-bottom: 0.15em;
  background: var(--gradient-display);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* drop-shadow místo text-shadow — pracuje s gradient-clipped textem */
  filter: drop-shadow(0 2px 4px rgba(59, 30, 0, 0.1));
}

/* ----- Body text ----- */
p, li {
  font-size: var(--font-size-body);
  line-height: var(--lh-normal);
}
p + p, li + li { margin-top: 0.5em; }

.muted { color: var(--color-muted); }
.small { font-size: var(--font-size-small); }
.tiny  { font-size: var(--font-size-tiny); }

/* ----- Links ----- */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-accent); }

/* ----- A11y ----- */
.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;
}

@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;
  }
}

/* ----- Selection ----- */
::selection {
  background: var(--color-accent-glow);
  color: var(--color-fg);
}