/* Camofi design tokens — ported from the Camofi design system for this landing page. */

/* WOFF2 first (≈54% smaller), TTF retained as a fallback for older engines. */
@font-face{font-family:"Instrument Sans";src:url("../assets/fonts/InstrumentSans-Variable.woff2") format("woff2-variations"),url("../assets/fonts/InstrumentSans-Variable.ttf") format("truetype-variations");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans Static";src:url("../assets/fonts/InstrumentSans-Regular.woff2") format("woff2"),url("../assets/fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans Static";src:url("../assets/fonts/InstrumentSans-Medium.woff2") format("woff2"),url("../assets/fonts/InstrumentSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans Static";src:url("../assets/fonts/InstrumentSans-SemiBold.woff2") format("woff2"),url("../assets/fonts/InstrumentSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans Static";src:url("../assets/fonts/InstrumentSans-Bold.woff2") format("woff2"),url("../assets/fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
/* Brand primitives */
--camofi-blue:#0000FF;
--camofi-blue-press:#0000C4;
--camofi-blue-hover:#8476D1;
--camofi-ink:#181818;
--camofi-white:#FFFFFF;

/* Sand ramp (warm accent, periodic use only) */
--sand-100:#F8ECDF;
--sand-200:#EFD9BF;
--sand-300:#E4C7A2;
--sand-400:#CFA67B;
--sand-500:#B98A56;
--sand-600:#96693C;
--gradient-brand-sand:linear-gradient(135deg,var(--camofi-blue) 0%,#B9B4FF 50%,var(--sand-400) 100%);

/* Blue ramp */
--blue-50:#F2F2FF;
--blue-100:#E4E4FF;
--blue-200:#C9C9FF;
--blue-300:#9E9EFF;
--blue-400:#5C5CFF;
--blue-500:#0000FF;
--blue-600:#0000C4;
--blue-700:#00008F;
--blue-800:#00005C;
--blue-900:#000033;

/* Cool neutral ramp */
--neutral-0:#FFFFFF;
--neutral-25:#FBFBFD;
--neutral-50:#F7F7FA;
--neutral-100:#F0F0F5;
--neutral-150:#E7E7EE;
--neutral-200:#DCDCE5;
--neutral-300:#C3C3CF;
--neutral-400:#9A9AA8;
--neutral-500:#74747F;
--neutral-600:#54545C;
--neutral-700:#3A3A40;
--neutral-800:#262629;
--neutral-900:#181818;

/* Semantic status */
--signal-positive:#0F7A5A;
--signal-positive-surface:#E8F5F0;
--signal-caution:#9A6B00;
--signal-caution-surface:#FBF3E0;
--signal-critical:#B3261E;
--signal-critical-surface:#FBEBEA;
--signal-info:var(--blue-500);
--signal-info-surface:var(--blue-50);

/* Refraction accents (prism edge only, never fills) */
--prism-cyan:#7FE8FF;
--prism-violet:#B39BFF;
--prism-rose:#FFB9D6;

/* Semantic aliases */
--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-tertiary:var(--neutral-400);
--text-inverse:var(--neutral-0);
--text-brand:var(--camofi-blue);
--text-link:var(--camofi-blue);
--text-link-hover:var(--blue-600);

--surface-page:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--neutral-900);
--surface-brand:var(--camofi-blue);
--surface-brand-subtle:var(--blue-50);

--glass-fill:rgba(255,255,255,0.62);
--glass-fill-strong:rgba(255,255,255,0.82);
--glass-fill-tint:rgba(0,0,255,0.04);
--glass-border:rgba(255,255,255,0.7);
--glass-blur:20px;

--border-subtle:var(--neutral-150);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-brand:var(--camofi-blue);
--focus-ring:rgba(0,0,255,0.28);

--surface-sand-subtle:var(--sand-100);
--border-sand:var(--sand-300);

/* Typography */
--font-sans:"Instrument Sans","Instrument Sans Static",-apple-system,"Helvetica Neue",Arial,sans-serif;
--font-display:var(--font-sans);
--font-mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;

--text-display-1:clamp(48px,5.4vw,76px);
--text-display-2:clamp(38px,4vw,56px);
--text-h1:40px;
--text-h2:32px;
--text-h3:24px;
--text-h4:20px;
--text-body-lg:18px;
--text-body:16px;
--text-body-sm:14px;
--text-caption:13px;
--text-micro:11px;

--leading-display:1.02;
--leading-heading:1.14;
--leading-body:1.55;
--leading-tight:1.3;

--tracking-display:-0.03em;
--tracking-heading:-0.02em;
--tracking-body:-0.005em;
--tracking-label:0.02em;
--tracking-eyebrow:0.14em;

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

/* Spacing */
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--space-20:80px;--space-24:96px;--space-32:128px;
--gutter-page:32px;--gutter-page-lg:64px;
--container-max:1240px;--container-narrow:720px;
--section-y:96px;--section-y-lg:140px;

/* Shape + shadows (light) */
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;
--radius-2xl:28px;--radius-pill:999px;
--border-width:1px;--border-width-strong:1.5px;

--shadow-xs:0 1px 2px rgba(24,24,40,0.05);
--shadow-sm:0 1px 2px rgba(24,24,40,0.04),0 2px 6px rgba(24,24,40,0.05);
--shadow-md:0 2px 4px rgba(24,24,40,0.04),0 8px 20px rgba(24,24,40,0.07);
--shadow-lg:0 4px 8px rgba(24,24,40,0.04),0 18px 44px rgba(24,24,40,0.10);
--shadow-xl:0 8px 16px rgba(24,24,40,0.05),0 36px 80px rgba(24,24,40,0.13);
--shadow-glass:0 1px 0 rgba(255,255,255,0.9) inset,0 12px 40px rgba(24,24,60,0.10);
--shadow-focus:0 0 0 3px var(--focus-ring);
--shadow-brand:0 8px 24px rgba(0,0,255,0.18);

--gradient-prism:linear-gradient(100deg,var(--prism-cyan) 0%,var(--prism-violet) 46%,var(--prism-rose) 100%);
--gradient-glass:linear-gradient(160deg,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.45) 55%,rgba(0,0,255,0.05) 100%);
--gradient-veil:linear-gradient(180deg,rgba(247,247,250,0) 0%,var(--neutral-50) 82%);
--gradient-brand-wash:radial-gradient(120% 90% at 12% 0%,rgba(0,0,255,0.10) 0%,rgba(0,0,255,0) 58%);

/* Motion */
--ease-standard:cubic-bezier(0.22,0.61,0.36,1);
--ease-entrance:cubic-bezier(0,0,0.2,1);
--ease-exit:cubic-bezier(0.4,0,1,1);
--duration-instant:80ms;
--duration-fast:140ms;
--duration-base:220ms;
--duration-slow:420ms;
--duration-ambient:1200ms;
/* Drawers open on a long curve on purpose — a panel unfolding is a bigger
   change than a hover, and reading it as movement rather than a jump is the
   whole point. Slower than --duration-slow by design. */
--duration-drawer:520ms;
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);

/* Entrance choreography — see INTERACTION.md */
--reveal-distance:30px;
--reveal-duration:620ms;
--reveal-stagger:90ms;
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms;--duration-ambient:0ms;--duration-drawer:0ms;--reveal-distance:0px;--reveal-duration:0ms;--reveal-stagger:0ms}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);color:var(--text-primary)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
/* Focus ring never overrides an element's own radius — pills must stay pills. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
:where(a,[tabindex]):focus-visible{border-radius:var(--radius-xs)}
::selection{background:var(--blue-100);color:var(--camofi-blue)}