/* RCNT design tokens — set as CSS vars by tweaks; pillar accents fixed per brief */

@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('fonts/FKGroteskMono-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}
@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('fonts/FKGroteskMono-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00BF, U+2000-206F, U+2070-209F;
}

:root {
  /* Pillar accents (per brief) */
  --p-cdv: #22D3EE;        /* Centrum Nauki Leonardo da Vinci — turkus */
  --p-ds:  #F59E0B;        /* Dwór Starostów — bursztyn/złoto */
  --p-lab: #10B981;        /* Laboratorium — zieleń medyczna */
  --p-sb:  #3B82F6;        /* Strefa Biznesu — błękit korporacyjny */

  /* Base — controlled by Tweaks (defaults set inline by JS) */
  --bg-deep: #0A1628;
  --bg-rise: #1B2845;
  --bg-light: #FAFBFC;
  --ink: #E8EDF4;
  --ink-dim: #94A3B8;
  --ink-on-light: #0A1628;
  --ink-on-light-dim: #475569;
  --line: rgba(232, 237, 244, 0.08);
  --line-light: rgba(10, 22, 40, 0.08);

  /* Geometry */
  --r: 12px;                /* tile radius — tweakable 0–24 */
  --r-sm: 8px;
  --r-pill: 999px;

  /* Density (tweakable) */
  --section-y: 88px;        /* tweakable 64 / 88 / 120 */
  --stack-sm: 16px;
  --stack-md: 24px;
  --stack-lg: 40px;
  --stack-xl: 56px;
  --head-gap: clamp(36px, 4.5vw, 64px); /* odstęp nagłówek sekcji → treść */
  --container: 1200px;
  --gutter: 32px;

  /* Futuristic intensity 0..1 (tweakable) */
  --fx: 0.6;

  /* Type */
  --f-ui: 'Sora', system-ui, -apple-system, sans-serif;
  --f-display: 'Sora', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid (mobile-first). Max = desktop value, so desktop is
     identical; min keeps headings comfortable on 320–430px phones. */
  --fs-display-xl: clamp(40px, 8.5vw, 80px);  /* hero only */
  --fs-display-l:  clamp(30px, 6vw,   56px);  /* big section opener (rare) */
  --fs-h1:         clamp(27px, 4.6vw, 44px);  /* main section H2 */
  --fs-h2:         clamp(23px, 3.6vw, 32px);  /* sub-section / large card */
  --fs-h3:         clamp(18px, 2.4vw, 22px);  /* card title */
  --fs-h4:         clamp(16px, 1.7vw, 18px);  /* small card / list head */
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-micro:      12px;
  --fs-pill:       11px;     /* pill / mono label */
  --lh-display:    1.04;
  --lh-heading:    1.14;
  --lh-body:       1.55;

  /* Glass */
  --glass-bg: rgba(20, 32, 54, 0.42);
  --glass-bg-strong: rgba(14, 24, 44, 0.62);
  --glass-bg-light: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-light: rgba(10, 22, 40, 0.08);
  --glass-blur: 22px;
  --glass-blur-strong: 32px;
}

/* glass surface utility */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 32px rgba(0,0,0,0.25);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 48px rgba(0,0,0,0.35);
}
.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border-light);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-ui);
  background: #06101e;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* utility */
.mono { font-family: var(--f-mono); font-feature-settings: 'zero', 'ss01'; }
.display { font-family: var(--f-display); letter-spacing: -0.02em; font-weight: 500; }

/* Scroll behavior */
html { scroll-behavior: smooth; }

/* Prevent layout shift on scrollbar */
.viewport-host { overflow: hidden; }

/* placeholder pattern (Hero-01 style) */
.ph {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
  color: rgba(34, 211, 238, 0.7);
}
.ph::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid currentColor;
  opacity: 0.5;
}
.ph::after {
  content: "";
  position: absolute; inset: 8px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), currentColor calc(50% - 0.3px), currentColor calc(50% + 0.3px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom left,  transparent calc(50% - 0.5px), currentColor calc(50% - 0.3px), currentColor calc(50% + 0.3px), transparent calc(50% + 0.5px));
  opacity: 0.35;
}
.ph .ph-label {
  position: absolute; left: 16px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: currentColor;
  z-index: 2;
  text-transform: uppercase;
}
.ph .ph-tag {
  position: absolute; right: 16px; top: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: currentColor;
  opacity: 0.7;
  z-index: 2;
}

/* generic glow effect controlled by --fx */
.fx-glow {
  box-shadow:
    0 0 0 1px color-mix(in oklch, currentColor calc(var(--fx) * 30%), transparent),
    0 calc(var(--fx) * 24px) calc(var(--fx) * 60px) calc(var(--fx) * -10px) color-mix(in oklch, currentColor calc(var(--fx) * 35%), transparent);
}

/* fade/slide-in observer */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* focus */
:focus-visible {
  outline: 2px solid var(--p-cdv);
  outline-offset: 2px;
  border-radius: 4px;
}