/* =============================================================
   Ondřej Firla — Design Tokens
   Dark, minimalist portfolio system. Warm-human Czech tone,
   cinematic motion, blue→purple accent.
   ============================================================= */

/* ---------- Fonts ---------- */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -------- Color — base scale (near-black to white) -------- */
  --nv-black:       #000000;
  --nv-bg:          #0A0A0A;      /* canvas */
  --nv-bg-raised:  #111113;       /* cards on canvas */
  --nv-bg-sunken:  #060607;       /* recessed surfaces */

  --nv-surface-1:   rgba(255, 255, 255, 0.02);
  --nv-surface-2:   rgba(255, 255, 255, 0.04);
  --nv-surface-3:   rgba(255, 255, 255, 0.06);
  --nv-surface-4:   rgba(255, 255, 255, 0.09);

  /* Hairlines — always semi-translucent so they sit on any dark bg */
  --nv-line-1:      rgba(255, 255, 255, 0.06);
  --nv-line-2:      rgba(255, 255, 255, 0.10);
  --nv-line-3:      rgba(255, 255, 255, 0.16);

  /* Neutrals (text) */
  --nv-fg-1:        #FFFFFF;                    /* primary text */
  --nv-fg-2:        rgba(255, 255, 255, 0.72);  /* secondary */
  --nv-fg-3:        rgba(255, 255, 255, 0.52);  /* tertiary / meta */
  --nv-fg-4:        rgba(255, 255, 255, 0.34);  /* captions / disabled */
  --nv-fg-5:        rgba(255, 255, 255, 0.18);  /* placeholders */

  /* -------- Accent — blue → violet gradient system -------- */
  --nv-accent-blue:    #3B82F6;
  --nv-accent-indigo:  #6366F1;
  --nv-accent-violet:  #8B5CF6;
  --nv-accent:         #6D6BF4;  /* midpoint — single-color use */

  --nv-accent-glow-blue:   rgba(59, 130, 246, 0.45);
  --nv-accent-glow-violet: rgba(139, 92, 246, 0.45);

  --nv-grad-accent:    linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  --nv-grad-accent-soft: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(139,92,246,0.18) 100%);
  --nv-grad-accent-text: linear-gradient(90deg, #93C5FD 0%, #C4B5FD 100%);

  /* Semantic */
  --nv-success:     #34D399;
  --nv-warning:     #FBBF24;
  --nv-danger:      #F87171;
  --nv-info:        var(--nv-accent-blue);

  /* -------- Typography -------- */
  --nv-font-display: 'General Sans', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --nv-font-body:    'Space Grotesk', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --nv-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid display scale */
  --nv-text-hero:    clamp(3.5rem, 8vw, 7.5rem);     /* 56 → 120 */
  --nv-text-display: clamp(2.75rem, 5.5vw, 5rem);    /* 44 → 80  */
  --nv-text-h1:      clamp(2.25rem, 4vw, 3.5rem);    /* 36 → 56  */
  --nv-text-h2:      clamp(1.75rem, 2.8vw, 2.5rem);  /* 28 → 40  */
  --nv-text-h3:      1.5rem;    /* 24 */
  --nv-text-h4:      1.25rem;   /* 20 */
  --nv-text-lead:    1.25rem;   /* 20 — subheads */
  --nv-text-body:    1rem;      /* 16 */
  --nv-text-sm:      0.875rem;  /* 14 */
  --nv-text-xs:      0.75rem;   /* 12 — eyebrows, meta */

  --nv-weight-regular:  400;
  --nv-weight-medium:   500;
  --nv-weight-semibold: 600;
  --nv-weight-bold:     700;

  --nv-leading-tight:   1.05;
  --nv-leading-snug:    1.2;
  --nv-leading-normal:  1.5;
  --nv-leading-relaxed: 1.65;

  --nv-tracking-tighter: -0.04em;
  --nv-tracking-tight:   -0.02em;
  --nv-tracking-normal:  0;
  --nv-tracking-wide:    0.08em;   /* eyebrows */
  --nv-tracking-wider:   0.16em;   /* section labels */

  /* -------- Spacing scale (4px base) -------- */
  --nv-sp-0:   0;
  --nv-sp-1:   0.25rem;  /*  4 */
  --nv-sp-2:   0.5rem;   /*  8 */
  --nv-sp-3:   0.75rem;  /* 12 */
  --nv-sp-4:   1rem;     /* 16 */
  --nv-sp-5:   1.5rem;   /* 24 */
  --nv-sp-6:   2rem;     /* 32 */
  --nv-sp-7:   3rem;     /* 48 */
  --nv-sp-8:   4rem;     /* 64 */
  --nv-sp-9:   6rem;     /* 96 */
  --nv-sp-10:  8rem;     /*128 */
  --nv-sp-11:  12rem;    /*192 — section rhythm */

  /* -------- Radii -------- */
  --nv-radius-xs:  4px;
  --nv-radius-sm:  8px;
  --nv-radius-md:  12px;
  --nv-radius-lg:  16px;
  --nv-radius-xl:  24px;
  --nv-radius-2xl: 32px;
  --nv-radius-pill: 999px;

  /* -------- Shadows & Glow -------- */
  --nv-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --nv-shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --nv-shadow-lg: 0 24px 60px rgba(0,0,0,0.5);

  /* Inner highlight — the "top light" seen on glass cards */
  --nv-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.08);
  --nv-inner-highlight-strong: inset 0 1px 0 rgba(255,255,255,0.14);

  /* Glow — subtle blue/violet bloom for accents */
  --nv-glow-sm: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 0 20px rgba(139, 92, 246, 0.18);
  --nv-glow-md: 0 0 30px rgba(139, 92, 246, 0.28), 0 0 60px rgba(59, 130, 246, 0.14);
  --nv-glow-lg: 0 0 60px rgba(139, 92, 246, 0.35), 0 0 120px rgba(59, 130, 246, 0.22);

  /* Focus ring */
  --nv-focus-ring: 0 0 0 2px var(--nv-bg), 0 0 0 4px var(--nv-accent);

  /* -------- Motion (slow & cinematic) -------- */
  --nv-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);      /* expo out */
  --nv-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --nv-ease-soft:    cubic-bezier(0.33, 1, 0.68, 1);

  --nv-dur-fast:     180ms;
  --nv-dur-base:     320ms;
  --nv-dur-slow:     640ms;
  --nv-dur-slower:   960ms;
  --nv-dur-cinema:  1400ms;

  /* -------- Layout -------- */
  --nv-container:    1280px;
  --nv-gutter:       clamp(1.25rem, 4vw, 3rem);

  /* -------- Glass (light, not heavy) -------- */
  --nv-glass-bg:     rgba(255, 255, 255, 0.03);
  --nv-glass-bg-2:   rgba(255, 255, 255, 0.05);
  --nv-glass-border: rgba(255, 255, 255, 0.08);
  --nv-glass-blur:   14px;
}

/* =============================================================
   Base / Semantic element styles
   ============================================================= */

html { color-scheme: dark; }

body {
  background: var(--nv-bg);
  color: var(--nv-fg-1);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-body);
  line-height: var(--nv-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* Display + headings — General Sans, tightly tracked */
.nv-hero, .nv-display, h1, h2, h3 {
  font-family: var(--nv-font-display);
  font-weight: var(--nv-weight-semibold);
  letter-spacing: var(--nv-tracking-tight);
  line-height: var(--nv-leading-tight);
  color: var(--nv-fg-1);
  text-wrap: balance;
}

.nv-hero     { font-size: var(--nv-text-hero);    letter-spacing: var(--nv-tracking-tighter); font-weight: 600; }
.nv-display  { font-size: var(--nv-text-display); letter-spacing: var(--nv-tracking-tighter); font-weight: 600; }
h1, .nv-h1   { font-size: var(--nv-text-h1); }
h2, .nv-h2   { font-size: var(--nv-text-h2); line-height: var(--nv-leading-snug); }
h3, .nv-h3   { font-size: var(--nv-text-h3); line-height: var(--nv-leading-snug); letter-spacing: var(--nv-tracking-normal); }
h4, .nv-h4   { font-size: var(--nv-text-h4); font-weight: var(--nv-weight-medium); letter-spacing: 0; }

/* Body */
p, .nv-p {
  font-size: var(--nv-text-body);
  line-height: var(--nv-leading-relaxed);
  color: var(--nv-fg-2);
  text-wrap: pretty;
}
.nv-lead {
  font-size: var(--nv-text-lead);
  line-height: var(--nv-leading-relaxed);
  color: var(--nv-fg-2);
  text-wrap: pretty;
}

/* Eyebrow — small uppercase label used above section titles */
.nv-eyebrow {
  font-family: var(--nv-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--nv-tracking-wider);
  text-transform: uppercase;
  color: var(--nv-fg-3);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nv-eyebrow::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--nv-accent-blue), var(--nv-accent-violet));
  display: inline-block;
}

/* Meta (dates, tags) */
.nv-meta, small {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-text-xs);
  color: var(--nv-fg-3);
  letter-spacing: 0.02em;
}

/* Code / kbd */
code, kbd, pre, .nv-mono {
  font-family: var(--nv-font-mono);
  font-size: 0.9em;
}
code {
  padding: 0.12em 0.42em;
  border-radius: var(--nv-radius-xs);
  background: var(--nv-surface-2);
  border: 1px solid var(--nv-line-1);
  color: var(--nv-fg-1);
}

/* Links */
a {
  color: var(--nv-fg-1);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--nv-dur-base) var(--nv-ease-out);
}
a:hover { color: var(--nv-fg-2); }

/* Selection */
::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* Gradient text utility */
.nv-gradient-text {
  background: var(--nv-grad-accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Divider */
.nv-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--nv-line-2), transparent);
  border: 0;
}