/* reko.studio — design tokens (custom properties only)
   Load order: tokens.css -> base.css -> glass.css */
:root{
  --bg-base:#05070C; --bg-deep:#020306;
  --text-primary:#EDF1F7; --text-secondary:#B3C0D1; --text-tertiary:#B6C2D2;
  --accent:#6FD9F0; --accent-rgb:111,217,240; --accent-dim:rgba(111,217,240,.18);

  --glass-tint-a:.50;                       /* coarse: fixed, no probe */
  --glass-bg:rgba(9,13,21,var(--glass-tint-a));
  --glass-blur:13px; --glass-sat:140%; --glass-bright:1.04;
  --glass-radius:18px;
  /* one radius family for everything you can click. --r-hit backs every
     text-sized hit surface (email pill, quiet links, contact row, skip link),
     --r-icon the 30-44px icon buttons. Pills (.tag) stay 999px on purpose. */
  --r-hit:12px; --r-icon:10px;
  --glass-shadow:0 17px 42px -14px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.34);
  --hairline-hi:rgba(255,255,255,.38); --hairline-lo:rgba(255,255,255,.045);
  /* static rim iridescence — fixed stops, never animated */
  --irid-violet:rgba(168,120,255,.26);
  --irid-cyan:rgba(110,220,255,.22);
  --irid-magenta:rgba(230,120,255,.16);
  --irid-teal:rgba(90,230,200,.18);

  --row-hairline:rgba(255,255,255,.30);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);

  --font-display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-text:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-h1:clamp(2.125rem, 2.86vw + 1.43rem, 4.5rem);
  --fs-body:clamp(1rem, .38vw + .907rem, 1.375rem);
  --fs-wordmark:clamp(1.125rem, .19vw + 1.079rem, 1.5rem);
  --fs-link:clamp(.9375rem, .143vw + .902rem, 1.0625rem);
  --fs-eyebrow:12px;
  --fs-footer:12px;

  --h1-track:-.016em; --h1-lh:1.14; --h1-measure:none; --h1-wrap:balance;

  --gutter:16px;
  --topbar-h:56px;
  --frame-max:1600px;
  --card-hero-max:358px;   --card-hero-pad:26px 20px 30px;
  --card-slim-max:358px;   --card-slim-pad:24px 20px;
  --hero-minh:82svh; --reko-minh:98svh; --contact-minh:82svh;
  --gap-eyebrow:20px; --gap-h1:22px;
  /* 84px, not 62: '2023-2025' is ~62px at 12px tabular, so the old track
     collided with the company name below 768 ('2023-2025Virta'). */
  --grid-gutter:84px; --grid-gap:12px; --grid-lead:0px; --group-gap:34px;
  --qicon:14px; --qname:104px;

  --bare-shadow:0 1px 2px rgba(0,0,0,.40), 0 2px 28px rgba(0,0,0,.55);
  --hero-fade:1;

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width:768px){
  :root{
    --gutter:32px; --topbar-h:64px;
    --card-hero-max:580px;  --card-hero-pad:34px 32px;
    --card-slim-max:520px;  --card-slim-pad:30px 28px;
    --hero-minh:72svh; --reko-minh:92svh; --contact-minh:82svh;
    --glass-blur:14px; --glass-radius:clamp(20px, 1.1vw + 15px, 30px);
    --glass-tint-a:.46; --hairline-hi:rgba(255,255,255,.42);
    --glass-shadow:0 24px 60px -20px rgba(0,0,0,.66), 0 2px 8px rgba(0,0,0,.34);
    --h1-track:-.022em; --h1-lh:1.09;
    --grid-gutter:76px; --grid-gap:14px; --grid-lead:150px; --group-gap:38px;
  }
}
@media (min-width:1024px){
  :root{
    --gutter:48px;
    --card-hero-max:720px;  --card-hero-pad:40px 40px;
    --card-slim-max:560px;  --card-slim-pad:34px 32px;
    --glass-blur:16px;
    --h1-track:-.028em; --h1-lh:1.06; --h1-measure:none; --h1-wrap:normal;
    --grid-gutter:88px;               /* year ranges breathe once there is room */
    --grid-lead:158px; --group-gap:42px;
  }
}
@media (min-width:1440px){
  :root{
    --gutter:64px; --topbar-h:72px;
    --card-hero-max:860px;  --card-hero-pad:48px 48px;
    --card-slim-max:600px;  --card-slim-pad:38px 36px;
    --grid-lead:168px; --group-gap:46px; --qname:116px;
    --fs-eyebrow:12.5px; --fs-footer:13px;
  }
}
@media (min-width:1920px){
  :root{
    --card-hero-max:960px; --card-hero-pad:54px 54px; --card-slim-pad:42px 40px;
    --fs-eyebrow:13px;
    --gap-eyebrow:24px; --gap-h1:26px;
  }
}

@media (prefers-contrast:more){
  :root{ --glass-tint-a:.80; --hairline-hi:rgba(255,255,255,.60); --text-secondary:#EDF1F7; }
}