/* Selix marketing site. Design tokens from the Selix Design System, then site rules. */
/* tokens/colors.css */
:root{
/* --- Source palette (sampled from Selix-Concept.pdf) --- */
--selix-violet-300:#8F7BFF;
--selix-violet-400:#8567FF;
--selix-violet-500:#6C4DFF;
--selix-indigo-900:#23155D;
--selix-ink-900:#100A2C;
--selix-ink-950:#0D091F;
--selix-ink-1000:#00001E;
--selix-off-white:#F7F7F7;
--selix-white:#FFFFFF;

/* --- Violet ramp. 300/400/500/900/950 are source values; the rest are derived. --- */
--violet-50:#F1EEFF;
--violet-100:#E4DEFF;
--violet-200:#C9BEFF;
--violet-300:#8F7BFF;
--violet-400:#8567FF;
--violet-500:#6C4DFF;
--violet-600:#5334E6;
--violet-700:#3F26B3;
--violet-800:#2E1A80;
--violet-900:#23155D;
--violet-950:#100A2C;

/* --- Neutrals. Ink-tinted; 25/900/950/1000 are source values. --- */
--neutral-0:#FFFFFF;
--neutral-25:#F7F7F7;
--neutral-50:#F2F1F6;
--neutral-100:#E8E7EE;
--neutral-200:#D5D3E0;
--neutral-300:#B4B1C6;
--neutral-400:#8B87A3;
--neutral-500:#6A6684;
--neutral-600:#4F4B66;
--neutral-700:#38344C;
--neutral-800:#221E35;
--neutral-900:#100A2C;
--neutral-950:#0D091F;
--neutral-1000:#00001E;

/* --- Semantic status. DERIVED — not present in the source material. --- */
--success-500:#12A87A;
--success-100:#DAF3EA;
--warning-500:#E8A33D;
--warning-100:#FBEED8;
--danger-500:#E5484D;
--danger-100:#FBE0E1;

/* --- Semantic aliases: light (default) --- */
--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-tertiary:var(--neutral-400);
--text-inverse:var(--neutral-0);
--text-accent:var(--violet-500);
--text-on-accent:var(--neutral-0);
--text-link:var(--violet-600);
--text-link-hover:var(--violet-700);

--surface-page:var(--neutral-25);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-50);
--surface-raised:var(--neutral-0);
--surface-inverse:var(--neutral-900);
--surface-accent:var(--violet-500);
--surface-accent-hover:var(--violet-600);
--surface-accent-subtle:var(--violet-50);
--surface-hover:var(--neutral-50);
--surface-active:var(--neutral-100);
--surface-disabled:var(--neutral-100);

--border-subtle:var(--neutral-100);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-accent:var(--violet-500);
--border-inverse:rgba(255,255,255,.14);

--focus-ring:rgba(108,77,255,.32);
--overlay-scrim:rgba(16,10,44,.56);
}

[data-theme="dark"]{
--text-primary:var(--neutral-0);
--text-secondary:rgba(255,255,255,.66);
--text-tertiary:rgba(255,255,255,.42);
--text-inverse:var(--neutral-900);
--text-accent:var(--violet-300);
--text-link:var(--violet-300);
--text-link-hover:var(--violet-200);

--surface-page:var(--neutral-950);
--surface-card:var(--neutral-900);
--surface-sunken:var(--neutral-1000);
--surface-raised:#191231;
--surface-inverse:var(--neutral-0);
--surface-accent-subtle:rgba(108,77,255,.14);
--surface-hover:rgba(255,255,255,.05);
--surface-active:rgba(255,255,255,.09);
--surface-disabled:rgba(255,255,255,.07);

--border-subtle:rgba(255,255,255,.08);
--border-default:rgba(255,255,255,.14);
--border-strong:rgba(255,255,255,.24);
--border-inverse:rgba(16,10,44,.14);
--overlay-scrim:rgba(0,0,30,.72);
}

/* tokens/typography.css */
:root{
--font-sans:"Geist","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

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

--text-11:11px;
--text-12:12px;
--text-13:13px;
--text-14:14px;
--text-16:16px;
--text-18:18px;
--text-20:20px;
--text-24:24px;
--text-30:30px;
--text-38:38px;
--text-48:48px;
--text-60:60px;
--text-76:76px;
--text-96:96px;

--leading-tight:1.02;
--leading-snug:1.12;
--leading-heading:1.2;
--leading-normal:1.5;
--leading-relaxed:1.62;

--tracking-display:-0.032em;
--tracking-heading:-0.018em;
--tracking-body:-0.006em;
--tracking-wide:0.02em;
--tracking-label:0.18em;

/* Composite roles */
--type-display-1:var(--weight-medium) var(--text-96)/var(--leading-tight) var(--font-sans);
--type-display-2:var(--weight-medium) var(--text-76)/var(--leading-tight) var(--font-sans);
--type-display-3:var(--weight-medium) var(--text-60)/var(--leading-snug) var(--font-sans);
--type-heading-1:var(--weight-medium) var(--text-38)/var(--leading-heading) var(--font-sans);
--type-heading-2:var(--weight-medium) var(--text-30)/var(--leading-heading) var(--font-sans);
--type-heading-3:var(--weight-medium) var(--text-24)/var(--leading-heading) var(--font-sans);
--type-heading-4:var(--weight-medium) var(--text-20)/var(--leading-heading) var(--font-sans);
--type-body-lg:var(--weight-regular) var(--text-18)/var(--leading-relaxed) var(--font-sans);
--type-body:var(--weight-regular) var(--text-16)/var(--leading-normal) var(--font-sans);
--type-body-sm:var(--weight-regular) var(--text-14)/var(--leading-normal) var(--font-sans);
--type-caption:var(--weight-regular) var(--text-13)/var(--leading-normal) var(--font-sans);
--type-label:var(--weight-medium) var(--text-14)/1.3 var(--font-sans);
--type-mono:var(--weight-regular) var(--text-13)/1.45 var(--font-mono);
--type-eyebrow:var(--weight-regular) var(--text-12)/1.3 var(--font-mono);
}

/* tokens/spacing.css */
:root{
--space-0:0px;
--space-1:2px;
--space-2:4px;
--space-3:6px;
--space-4:8px;
--space-5:12px;
--space-6:16px;
--space-7:20px;
--space-8:24px;
--space-9:32px;
--space-10:40px;
--space-11:48px;
--space-12:64px;
--space-13:80px;
--space-14:96px;
--space-15:128px;
--space-16:160px;

--gutter-page:24px;
--gutter-page-lg:48px;
--container-max:1200px;
--container-prose:680px;
--section-y:96px;
--section-y-lg:128px;
}

/* tokens/radius.css */
:root{
--radius-0:0px;
--radius-1:2px;
--radius-2:4px;
--radius-3:6px;
--radius-4:8px;
--radius-5:12px;
--radius-6:16px;
--radius-7:24px;
--radius-full:999px;

--radius-control:8px;
--radius-card:12px;
--radius-surface:16px;
--radius-pill:999px;
}

/* tokens/elevation.css */
:root{
--shadow-none:none;
--shadow-1:0 1px 2px rgba(16,10,44,.06);
--shadow-2:0 1px 2px rgba(16,10,44,.05),0 4px 12px rgba(16,10,44,.06);
--shadow-3:0 2px 4px rgba(16,10,44,.05),0 12px 32px rgba(16,10,44,.10);
--shadow-4:0 4px 8px rgba(16,10,44,.06),0 24px 64px rgba(16,10,44,.14);
--shadow-accent:0 8px 24px rgba(108,77,255,.28);
--shadow-inset-hairline:inset 0 0 0 1px rgba(16,10,44,.06);
--shadow-focus:0 0 0 3px var(--focus-ring);
}
[data-theme="dark"]{
--shadow-1:0 1px 2px rgba(0,0,30,.4);
--shadow-2:0 1px 2px rgba(0,0,30,.4),0 4px 12px rgba(0,0,30,.5);
--shadow-3:0 2px 4px rgba(0,0,30,.4),0 12px 32px rgba(0,0,30,.6);
--shadow-4:0 4px 8px rgba(0,0,30,.4),0 24px 64px rgba(0,0,30,.7);
--shadow-inset-hairline:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* tokens/motion.css */
:root{
/* "Convergence" — fast out, settled arrival. Nothing overshoots. */
--ease-converge:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */

--duration-instant:80ms; /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-normal:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
--duration-slower:560ms; /* @kind other */

--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
--transition-surface:transform var(--duration-normal) var(--ease-converge),opacity var(--duration-normal) var(--ease-converge); /* @kind other */
}

/* tokens/gradients.css */
:root{
/* Sampled from the concept board backgrounds. */
--gradient-halo:radial-gradient(120% 100% at 12% 8%,#FDFCFF 0%,#F3F0FF 34%,#E9E6FA 62%,#E4E4E2 100%); /* @kind color */
--gradient-deep:radial-gradient(110% 90% at 78% 18%,#3B2A75 0%,#251A57 38%,#170F3B 70%,#100A2C 100%); /* @kind color */
--gradient-violet:linear-gradient(135deg,#6C4DFF 0%,#8F7BFF 100%); /* @kind color */
--gradient-ink:linear-gradient(180deg,#100A2C 0%,#0D091F 100%); /* @kind color */
--gradient-signal:linear-gradient(90deg,rgba(108,77,255,0) 0%,#6C4DFF 50%,rgba(108,77,255,0) 100%); /* @kind color */
--gradient-protect-bottom:linear-gradient(180deg,rgba(16,10,44,0) 0%,rgba(16,10,44,.86) 100%); /* @kind color */
--gradient-protect-top:linear-gradient(180deg,rgba(16,10,44,.72) 0%,rgba(16,10,44,0) 100%); /* @kind color */
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);letter-spacing:var(--tracking-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;letter-spacing:var(--tracking-heading);font-weight:var(--weight-medium)}
p{margin:0}
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}
button{font:inherit}
:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}
::selection{background:var(--violet-200);color:var(--neutral-900)}
.selix-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}


/* ---- hover states from the design ---- */
.hv1:hover{box-shadow:0 8px 24px rgba(16,10,44,.10) !important;border-color:#D6D4E0 !important}
.hv2:hover{border-color:#B9B4C7 !important}

/* ---- page base (from the design helmet) ---- */
body{margin:0;background:#F7F7F7}
a{color:#5334E6;text-decoration:none}
a:hover{color:#3F26B3;text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
section[id],div[id="signup"]{scroll-margin-top:84px}

/* ---- component states the design runtime handled in JS ---- */
.btn-primary:hover{background:var(--surface-accent-hover)!important;text-decoration:none!important;color:var(--text-on-accent)!important}
.btn-inverse:hover{background:var(--neutral-100)!important;text-decoration:none!important}
.btn-primary:active,.btn-inverse:active{transform:translateY(1px)!important}
a:hover .btn-primary,a:hover .btn-inverse{text-decoration:none}
.field:focus-within{border-color:var(--violet-500)!important;box-shadow:var(--shadow-focus)!important}
.field input{font-size:16px}
[role=tab]:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}
form[data-signup] button[disabled]{opacity:.7;cursor:progress!important}
.form-error{margin-top:10px;font:400 14px/1.45 'Geist',sans-serif;color:#E5484D}
.on-dark .form-error{color:#FFB4B6}

/* ---- phones and small tablets ---- */
@media (max-width:760px){
  .m-hide{display:none!important}
  .m-1col{grid-template-columns:1fr!important}
  .m-scroll{display:flex!important;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-scroll::-webkit-scrollbar{display:none}
  .m-scroll [role=tab]{white-space:nowrap;flex:0 0 auto}
  .m-wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .m-wide>*{min-width:720px}
  .m-wrap{flex-wrap:wrap!important}
}