/* ============================================================
   David Tichý — Design System
   Colors + Type tokens (single source of truth)
   ============================================================ */

/* IBM Plex Sans — self-hosted (žádné externí požadavky: GDPR + spolehlivost;
   Google Fonts CDN odstraněn 18. 7. 2026 při bezpečnostním auditu před vydáním.
   Permanent Marker vyřazen — používala ho jen stará beta intra, která jde pryč.) */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans/ibm-plex-sans-v23-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans/ibm-plex-sans-v23-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans/ibm-plex-sans-v23-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-sans/ibm-plex-sans-v23-latin_latin-ext-700.woff2") format("woff2");
}

/* IBM Plex Mono — self-hosted (300/400/500/700) */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin_latin-ext-300.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono/ibm-plex-mono-v20-latin_latin-ext-700.woff2") format("woff2");
}

/* Share Tech Mono — self-hosted */
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/share-tech-mono/share-tech-mono-v16-latin-regular.woff2") format("woff2");
}

/* DSEG7 Classic — self-hosted */
@font-face {
  font-family: "DSEG7 Classic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/dseg7/DSEG7Classic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DSEG7 Classic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/dseg7/DSEG7Classic-Bold.woff2") format("woff2");
}

:root {
  /* ---------- COLOR — base palette ----------
     Brand mood: terminal-on-cardboard. Deep matte black surfaces
     contrasted with a single warm "kraft" accent for the box/unboxing
     metaphor, plus a phosphor-green for terminal/data UI moments. */

  --bg-0:        #000000;   /* page background — cista cerna (match s koncem intro videa) */
  --bg-1:        #111111;   /* elevated surface (cards, panels)        */
  --bg-2:        #1a1a1a;   /* deepest elevation (inputs, code)        */
  --bg-inverse:  #f3efe7;   /* light surface for "letter / receipt"    */

  --line-soft:   #1f1f1f;   /* hairline divider on dark                */
  --line:        #2a2a2a;   /* default border on dark                  */
  --line-strong: #3a3a3a;   /* hover / focus ring base                 */

  --fg-0:        #f5f1ea;   /* primary text — warm off-white           */
  --fg-1:        #dad6cf;   /* secondary text                          */
  --fg-2:        #a09a90;   /* tertiary / labels / metadata (zesvětleno) */
  --fg-3:        #7a7670;   /* dim decorative (zesvětleno)             */
  --fg-on-light: #15110b;   /* ink on light surfaces                   */

  /* ---------- COLOR — brand accents ---------- */
  /* Green scale (kept variable name `kraft-*` for backwards compat) */
  --kraft-50:    #d8f3c6;   /* mint highlight                          */
  --kraft-100:   #9ed47a;   /* soft sage                               */
  --kraft-200:   #5fb24a;   /* primary green — accents, callouts       */
  --kraft-300:   #2f7a36;   /* deep green / hover                      */
  --kraft-400:   #163d1d;   /* forest / inset                          */

  --tape:        #d9c98a;   /* packing-tape color (slightly translucent in use) */

  --phosphor:    #b8ff5c;   /* terminal / "live" accent                */
  --phosphor-dim:#5d8a2e;   /* dim phosphor (idle states)              */

  --signal-up:   #b8ff5c;   /* up / success / +%                       */
  --signal-down: #ff6b3d;   /* down / error / -%                       */
  --signal-warn: #f5b342;   /* warn / pending                          */

  /* ---------- COLOR — semantic ---------- */
  --color-bg:        var(--bg-0);
  --color-surface:   var(--bg-1);
  --color-surface-2: var(--bg-2);
  --color-text:      var(--fg-0);
  --color-text-mute: var(--fg-2);
  --color-accent:    var(--kraft-200);
  --color-accent-2:  var(--phosphor);
  --color-border:    var(--line);
  --color-focus:     var(--phosphor);

  /* ---------- TYPE — families ---------- */
  --font-display: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-seg:     "DSEG7 Classic", "Share Tech Mono", monospace;

  /* ---------- TYPE — fluid scale (clamp(min, vw, max)) ----------
     Display sizes are intentionally large; portfolio is hero-driven. */
  --fs-display: clamp(3rem,   8vw,   6.5rem);   /* hero name           */
  --fs-h1:      clamp(2rem,   5vw,   3.5rem);   /* section headers     */
  --fs-h2:      clamp(1.5rem, 3vw,   2.25rem);
  --fs-h3:      clamp(1.125rem, 2vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;       /* 16px floor                              */
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;    /* labels, ALL-CAPS captions               */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.18em;  /* for ALL-CAPS micro labels             */

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADIUS ---------- */
  --r-0:    0;        /* default — system favors hard corners          */
  --r-sm:   2px;
  --r-md:   4px;      /* buttons, chips                                 */
  --r-lg:   8px;      /* cards (rare)                                   */
  --r-pill: 999px;

  /* ---------- ELEVATION ----------
     Mostly flat; depth comes from inset borders + tape highlights. */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--line);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--line-strong);
  --shadow-glow: 0 0 0 1px var(--phosphor), 0 0 24px rgba(184,255,92,0.25);
  --shadow-box: 0 18px 40px -14px rgba(0,0,0,0.7), 0 0 0 1px var(--kraft-400);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   600ms;
  --dur-intro:  1400ms;

  /* ---------- LAYOUT ---------- */
  --max-content: 72rem; /* 1152px */
  --max-prose:   38rem; /* 608px  */
  --gutter:      var(--s-5);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop these on bare HTML for instant on-brand defaults.
   ============================================================ */

html { background: var(--bg-0); color: var(--fg-0); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-0);
}
h2, .h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  max-width: var(--max-prose);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-0);
}

small, .small { font-size: var(--fs-small); color: var(--fg-2); }

.eyebrow,
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.numeral {
  font-family: var(--font-seg);
  letter-spacing: 0.02em;
}

a {
  color: var(--fg-0);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fg-3);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--phosphor); color: var(--fg-0); }

::selection { background: var(--phosphor); color: var(--fg-on-light); }