/* This Is It Zagreb brand tokens.
   Every page we build imports this file first. Do not hardcode colors, sizes or fonts.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Sora:wght@400;500&display=swap" rel="stylesheet"> */

:root {
  /* Ground and surfaces */
  --charcoal: #060608;        /* page ground, almost black (16 Oct 2026). Never pure #000 */
  --panel: #0e0e11;           /* cards, inputs */
  --raised: #16161a;          /* menus */
  --line: rgba(242, 240, 234, .08);
  --line-strong: rgba(242, 240, 234, .18);

  /* Text. Always off white, never colored, never pure #fff */
  --text: #f2f0ea;
  --text-soft: #c9c7c2;       /* captions and meta only */
  --text-dim: #8d8b92;        /* small uppercase labels only */
  --button: #f2f0ea;          /* the one button: off white with near black text */
  --button-text: #060608;

  /* Spectrum, sampled from stage light. Lines, borders, icons, glow. Never text, never big fills */
  --dome: #2e63e0;
  --violet: #7a66d8;
  --orchid: #c866b6;
  --rose: #de4870;
  --ember: #ee5427;
  --mint: #6ad9b1;            /* rare edge light */
  --cream: #ede1ad;           /* rare, from the stage type */

  --spectrum: linear-gradient(90deg, #2e63e0 0%, #7a66d8 26%, #c866b6 52%, #de4870 76%, #ee5427 100%);
  --spectrum-deep: linear-gradient(90deg, #284fae 0%, #6052a8 26%, #9b528e 52%, #ac3b5a 76%, #b84423 100%);
  --spectrum-diag: linear-gradient(135deg, #2e63e0 0%, #7a66d8 26%, #c866b6 52%, #de4870 76%, #ee5427 100%);
  --glow:
    radial-gradient(55% 140% at 8% 100%, rgba(46, 99, 224, .55) 0%, transparent 62%),
    radial-gradient(45% 120% at 38% 110%, rgba(122, 102, 216, .45) 0%, transparent 60%),
    radial-gradient(45% 120% at 64% 110%, rgba(200, 102, 182, .42) 0%, transparent 60%),
    radial-gradient(55% 140% at 94% 100%, rgba(238, 84, 39, .50) 0%, transparent 62%);

  /* Grain. Global at --grain-soft, gradient areas at --grain-strong */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-soft: .025;
  --grain-strong: .16;

  /* Type */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display-weight: 500;      /* headings: Sora Medium, they must stand out */
  --body-weight: 300;         /* body is Inter Light, thinner than the headings */
  --medium-weight: 500;       /* buttons and labels only, never bold */

  /* Few sizes: a hero title, one headline size, one paragraph size, a small uppercase label */
  --fs-display: clamp(2.75rem, 6vw, 5rem);     /* hero title only, 44 to 80 */
  --fs-h1: clamp(1.875rem, 3vw, 2.625rem);     /* every section headline, 30 to 42 */
  --fs-h2: clamp(1.875rem, 3vw, 2.625rem);
  --fs-h3: 1.25rem;                            /* card titles, 20 */
  --fs-lead: 1.125rem;                         /* same as body */
  --fs-body: 1.125rem;                         /* paragraphs, 18 */
  --fs-small: 1rem;                            /* meta, 16 */
  --fs-label: .8125rem;                        /* uppercase labels, 13, letter spaced */

  --lh-display: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --measure: 34em;            /* about 64 characters per line */

  /* Space, 8 point 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; --s-11: 160px;
  --section: clamp(64px, 7vw, 104px);
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1200px;

  /* Shape */
  /* Sharp shapes (16 Oct 2026) */
  --r-pill: 3px;
  --r-card: 6px;
  --r-input: 3px;
  --r-tile: 4px;
  --border-spectrum: 1.5px;

  /* Controls, sized for older hands and eyes */
  --control-h: 54px;
  --tap-min: 48px;

  /* Motion. Slow and soft */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--charcoal); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: var(--grain);
  opacity: var(--grain-soft);
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: var(--medium-weight); }
::selection { background: rgba(122, 102, 216, .45); color: var(--text); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Shared brand pieces */
.lw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--control-h);
  padding: 0 32px;
  border-radius: var(--r-pill);
  font: var(--medium-weight) 1.0625rem/1 var(--font-body);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.lw-btn--primary {
  border: var(--border-spectrum) solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--spectrum) border-box;
}
/* The main button: one solid blue, no gradient, no grain. Off white text is above 4.5:1. */
.lw-btn--fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: var(--button);
  color: var(--button-text);
}
.lw-btn--fill .lw-icon, .lw-btn--fill svg { stroke: var(--button-text); }
/* Very subtle darker bottom so the brand line reads clearly */
.lw-btn--fill::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 6, 8, .10) 0%, rgba(6, 6, 8, 0) 50%);
}
/* Brand colour line along the bottom, flowing right to left forever.
   The strip is twice the button width and holds one full colour cycle per button width (blue to orange and back),
   repeated. Sliding it by exactly one cycle (half its width) lands on an identical frame, so the loop has no seam. Transform only, so it runs on the GPU. */
.lw-btn--fill::after {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; pointer-events: none;
  width: 200%; height: 3px;
  background: linear-gradient(90deg, #2e63e0 0%, #7a66d8 12.5%, #c866b6 25%, #de4870 37.5%, #ee5427 50%, #de4870 62.5%, #c866b6 75%, #7a66d8 87.5%, #2e63e0 100%) 0 0 / 50% 100% repeat-x;
  animation: lw-flow 3s linear infinite;
  will-change: transform;
}
@keyframes lw-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Buttons never animate or change on hover. */
.lw-btn--lg { min-height: 68px; padding: 0 40px; font-size: 1.25rem; }
.lw-btn--lg svg { width: 24px; height: 24px; }

.lw-btn--secondary {
  border: 1px solid var(--line-strong);
  background: transparent;
}
.lw-btn svg { width: 22px; height: 22px; }

.lw-link {
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-image var(--t-base) var(--ease);
}
.lw-link:hover { background-image: var(--spectrum); }

.lw-spectrum-line { height: 1px; background: var(--spectrum); border: 0; }

.lw-glow {
  position: relative;
  isolation: isolate;
}
.lw-glow::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background: var(--glow);
  opacity: .55;
}
.lw-glow::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: var(--grain-strong);
  mix-blend-mode: overlay;
}

/* Icons are off white by default. The spectrum version is for rare brand moments only. */
.lw-icon { width: 24px; height: 24px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lw-icon--plain { stroke: var(--text); }
.lw-icon--spectrum { stroke: url(#lw-spectrum); }

/* Section label: number, a short gradient dash, uppercase pre-header */
.lw-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 var(--fs-label)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.lw-label .n { color: var(--text); letter-spacing: 0; font-family: var(--font-display); font-size: .9375rem; }
.lw-label .dash { width: 22px; height: 1.5px; background: var(--spectrum); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .lw-btn--fill::after { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}