/* Beacon Light System — design tokens.
   Copied verbatim from the Baken — Beacon Light System design system
   (tokens/fonts.css, colors.css, typography.css, spacing.css, radii.css,
   elevation.css, motion.css). Do not edit by hand: re-export instead. */

/* Beacon Light System — webfonts.
   Source design loads both families from Google Fonts (no local binaries were provided).
   Instrument Sans: all UI + display type. JetBrains Mono: eyebrows, labels, meta. */
/* Webfonts are loaded with <link rel="preconnect"> + <link> in the page head,
   exactly as the source design does — faster than an @import here. */

:root{
  --font-core:"Instrument Sans",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

:root{
  /* Base palette — exact values from the baken. landing source */
  --ink:#060A14;
  --ink-deep:#03050B;
  --sand:#F3EFE8;
  --white:#FFFFFF;

  --blue:#0B49F5;          /* primary action + glow */
  --blue-bright:#3C7BFF;   /* mark, accents on dark */
  --blue-soft:#7FA8FF;      /* mono numerals on dark */
  --blue-pale:#DCE8FF;     /* active dot on dark cards */
  --blue-white:#F0F5FF;    /* beacon core */
  --sky:#96BEFF;
  --sky-pale:#D6E6FF;
  --violet:#6842EB;        /* single secondary accent (brand chip) */

  /* Semantic — light surfaces */
  --surface-page:var(--sand);
  --surface-card:var(--white);
  --surface-raised:rgba(255,255,255,.6);
  --text-primary:var(--ink);
  --text-secondary:rgba(6,10,20,.64);
  --text-tertiary:rgba(6,10,20,.6);
  --text-muted:rgba(6,10,20,.42);
  --text-faint:rgba(6,10,20,.35);
  --border-hairline:rgba(6,10,20,.1);
  --border-rule:rgba(6,10,20,.14);
  --border-strong:rgba(6,10,20,.22);

  /* Semantic — dark surfaces (the inverse half of the system) */
  --surface-dark:var(--ink);
  --surface-dark-deep:var(--ink-deep);
  --text-on-dark:var(--sand);
  --text-on-dark-secondary:rgba(243,239,232,.66);
  --text-on-dark-tertiary:rgba(243,239,232,.6);
  --text-on-dark-muted:rgba(243,239,232,.5);
  --border-on-dark:rgba(243,239,232,.12);
  --border-on-dark-rule:rgba(243,239,232,.14);
  --border-on-dark-strong:rgba(243,239,232,.28);

  /* Action */
  --action-bg:var(--blue);
  --action-fg:#FFFFFF;
  --action-bg-hover:var(--sand);
  --action-fg-hover:var(--ink);
  --link:var(--blue);
  --link-hover:var(--ink);

  /* Light / glow — the brand's one special effect */
  --glow-beacon:0 0 0 10px rgba(11,73,245,.24),0 0 44px 16px rgba(11,73,245,.85),0 0 130px 46px rgba(11,73,245,.38);
  --glow-mark:0 0 0 4px rgba(11,73,245,.2),0 0 20px 5px rgba(11,73,245,.6);
  --glow-dot:0 0 0 5px rgba(11,73,245,.35),0 0 24px 6px rgba(11,73,245,.9);
  --wash-blue:radial-gradient(50% 50% at 50% 0%,rgba(11,73,245,.26),transparent 70%); /* @kind other */
  --wash-blue-strong:radial-gradient(50% 50% at 50% 0%,rgba(11,73,245,.42),transparent 70%); /* @kind other */
  --beam:linear-gradient(to bottom,rgba(214,230,255,.9),transparent); /* @kind other */
  --protect-bottom:linear-gradient(to top,rgba(3,5,11,.85),transparent); /* @kind other */
}

:root{
  /* Display — always weight 400 with a 600 emphasis span inside */
  --display-1:clamp(42px,6.4vw,88px); /* @kind font */
  --display-2:clamp(34px,4.4vw,62px); /* @kind font */
  --display-3:clamp(29px,3.7vw,52px); /* @kind font */
  --display-4:clamp(28px,3.4vw,46px); /* @kind font */
  --display-5:clamp(28px,3.2vw,44px); /* @kind font */
  --title-lg:clamp(22px,2.3vw,30px); /* @kind font */
  --title:22px; /* @kind font */
  --title-sm:18.5px; /* @kind font */

  --body-lg:17.5px; /* @kind font */
  --body:16px; /* @kind font */
  --body-sm:15.5px; /* @kind font */
  --meta:13.5px; /* @kind font */
  --mono-label:11px; /* @kind font */
  --mono-nav:11.5px; /* @kind font */

  --lh-display:.98; /* @kind other */
  --lh-display-tight:1.03; /* @kind other */
  --lh-body:1.62; /* @kind other */
  --lh-body-tight:1.6; /* @kind other */

  --ls-display:-.04em; /* @kind other */
  --ls-display-2:-.035em; /* @kind other */
  --ls-title:-.03em; /* @kind other */
  --ls-title-sm:-.015em; /* @kind other */
  --ls-mono:.16em; /* @kind other */
  --ls-mono-tight:.1em; /* @kind other */

  --weight-regular:400; /* @kind other */
  --weight-medium:500; /* @kind other */
  --weight-semibold:600; /* @kind other */
}

:root{
  --space-1:6px;
  --space-2:10px;
  --space-3:12px;
  --space-4:14px;
  --space-5:18px;
  --space-6:22px;
  --space-7:26px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-12:64px;

  --gutter:32px;
  --measure:1400px; /* @kind spacing */
  --measure-text:34em; /* @kind spacing */
  --section-y:clamp(76px,9vw,140px); /* @kind spacing */
  --section-y-lg:clamp(84px,10vw,150px); /* @kind spacing */
  --section-y-sm:clamp(64px,8vw,120px); /* @kind spacing */
  --column-gap:clamp(32px,5vw,80px);
  --stack-gap:clamp(48px,6vw,84px);
}

:root{
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-round:50%;
}

:root{
  --shadow-card:0 2px 4px rgba(6,10,20,.05);
  --shadow-lift:0 30px 60px -28px rgba(6,10,20,.6);
  --shadow-ring-accent:0 0 0 1px rgba(11,73,245,.33);
  --glass-fill:linear-gradient(158deg,rgba(255,255,255,.15),rgba(255,255,255,.03)); /* @kind other */
  --glass-border:1px solid rgba(200,220,255,.2); /* @kind other */
  --glass-blur:blur(3px); /* @kind other */
  --hatch:repeating-linear-gradient(135deg,rgba(6,10,20,.035) 0 12px,transparent 12px 24px); /* @kind other */
}

:root{
  --ease-beacon:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --dur-fast:.25s; /* @kind other */
  --dur:.35s; /* @kind other */
  --dur-slow:.4s; /* @kind other */
  --dur-reveal:.9s; /* @kind other */
  --dur-fade:1.4s; /* @kind other */
  --float-slow:10s; /* @kind other */
  --breathe:4.5s; /* @kind other */
  --spin:26s; /* @kind other */
}
@keyframes bkn-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bkn-fade{from{opacity:0}to{opacity:1}}
@keyframes bkn-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes bkn-spin{to{transform:rotate(360deg)}}
@keyframes bkn-float{0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}50%{transform:translate3d(0,-16px,0) rotate(var(--rot,0deg))}}
@keyframes bkn-float2{0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}50%{transform:translate3d(0,12px,0) rotate(var(--rot,0deg))}}
.bkn-reveal{animation:bkn-rise var(--dur-reveal) var(--ease-beacon) both;animation-timeline:view();animation-range:entry 2% cover 24%}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}