/* ===========================================================================
   JJ Tech / JJ Labs design tokens.

   Ported verbatim from the design system bundle shipped with the handoffs:
   design/_ds/jj-tech-jj-labs-design-system-d123d86e-650f-41fb-b074-0c22e2864675/tokens/

   This is the brand's source of truth and it is shared by every page on
   jjlabs.ai. Do not hand-pick hex values that are not in this file, and do not
   fork a copy into a page. Add new pages by linking this file.
   =========================================================================== */

/* --- tokens/colors.css ---------------------------------------------------
   Ramps are anchored on the locked logo colours:
   blue-600 #1B41C4 / blue-400 #4C7BFF, violet-700 #4A1E9E / violet-400 #8B5CF0,
   orchid-600 #611B87 / orchid-300 #C77DEB. Do not re-anchor these. */
:root{
  /* Signal Blue, jjtech primary */
  --blue-50:#EEF2FF;--blue-100:#DCE4FF;--blue-200:#B8C8FF;--blue-300:#8AA6FF;--blue-400:#4C7BFF;
  --blue-500:#2E5AF0;--blue-600:#1B41C4;--blue-700:#16349B;--blue-800:#122873;--blue-900:#0D1B4D;
  /* Deep Violet, the hinge colour shared by both marks */
  --violet-50:#F4EFFF;--violet-100:#E8DEFF;--violet-200:#D3BEFF;--violet-300:#B593FA;--violet-400:#8B5CF0;
  --violet-500:#6E36DC;--violet-600:#5A25BC;--violet-700:#4A1E9E;--violet-800:#38177A;--violet-900:#261052;
  /* Orchid, jjlabs terminal colour */
  --orchid-50:#FAF0FE;--orchid-100:#F3DEFB;--orchid-200:#E8BEF6;--orchid-300:#C77DEB;--orchid-400:#A855D4;
  --orchid-500:#8A2FB0;--orchid-600:#611B87;--orchid-700:#4E1569;--orchid-800:#390F4E;
  /* Ink, cool neutrals, faintly blue so they sit under the brand hues */
  --ink-0:#FFFFFF;--ink-25:#FAFAFD;--ink-50:#F5F6FA;--ink-100:#ECEEF5;--ink-200:#DDE1EC;--ink-300:#C3C9DA;
  --ink-400:#99A1B8;--ink-500:#6E778F;--ink-600:#4E5670;--ink-700:#363D53;--ink-800:#22273A;
  --ink-900:#14182A;--ink-950:#0A0C16;
  /* Semantic hues */
  --success-500:#12A594;--success-600:#0C8375;--success-50:#E6F7F4;
  --warning-500:#C77A00;--warning-600:#9C5F00;--warning-50:#FFF3DA;
  --danger-500:#D93043;--danger-600:#AF2032;--danger-50:#FDE8EA;
  /* Locked brand flats (logo spec: block flat at 16px and below) */
  --brand-tech-flat:#2F3AAE;
  --brand-labs-flat:#4A1E9E;
  /* Locked brand gradients. Axis is 120deg, the same axis as the logo block. */
  --gradient-tech:linear-gradient(120deg,#1B41C4,#4A1E9E);
  --gradient-labs:linear-gradient(120deg,#4A1E9E,#611B87);
  --gradient-tech-dark:linear-gradient(120deg,#4C7BFF,#8B5CF0);
  --gradient-labs-dark:linear-gradient(120deg,#8B5CF0,#C77DEB);
  --gradient-spectrum:linear-gradient(120deg,#1B41C4,#4A1E9E 55%,#611B87);
  --gradient-veil:linear-gradient(180deg,rgba(10,12,22,0) 0%,rgba(10,12,22,.72) 100%);
}

/* --- tokens/typography.css ----------------------------------------------- */
:root{
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

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

  /* Display, Space Grotesk only. Tight leading, negative tracking. */
  --size-display-2xl:76px;--lh-display-2xl:1.0;
  --size-display-xl:60px;--lh-display-xl:1.04;
  --size-display-lg:48px;--lh-display-lg:1.06;
  --size-display-md:38px;--lh-display-md:1.12;

  /* Headings, Space Grotesk */
  --size-h1:32px;--lh-h1:1.18;
  --size-h2:26px;--lh-h2:1.22;
  --size-h3:21px;--lh-h3:1.28;
  --size-h4:18px;--lh-h4:1.34;

  /* Body, Manrope */
  --size-body-lg:19px;--lh-body-lg:1.62;
  --size-body:16px;--lh-body:1.65;
  --size-body-sm:14px;--lh-body-sm:1.58;
  --size-caption:13px;--lh-caption:1.5;

  /* Eyebrow and label */
  --size-eyebrow:12px;--lh-eyebrow:1.2;--tracking-eyebrow:.14em;
  --size-mono:13px;--lh-mono:1.5;--tracking-mono:.01em;

  --tracking-display:-.028em;--tracking-heading:-.018em;--tracking-body:0em;
  --tracking-logo:.005em; /* locked: the wordmark's letter-spacing */

  --measure-prose:66ch;--measure-narrow:46ch;
}

/* --- tokens/spacing.css --------------------------------------------------- */
:root{
  /* 4px layout grid */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;
  --space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;
  /* Brand-locked units, taken off the logo master. Logo lockups and trim only. */
  --unit-trim:5px;--unit-gutter:5px;
  /* Section rhythm */
  --section-y:112px;--section-y-compact:72px;
  --gutter-page:24px;--container-max:1200px;--container-wide:1440px;--container-prose:720px;
}

/* --- tokens/radius.css ---------------------------------------------------
   Radii descend from the logo master: 11px block, 18px trim. */
:root{
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-md:11px;   /* logo block radius, default for controls */
  --radius-lg:18px;   /* logo trim radius, default for cards */
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-3xl:44px;
  --radius-pill:999px;
  --border-width-hairline:1px;--border-width-strong:2px;--border-width-trim:5px;
}

/* --- tokens/elevation.css ------------------------------------------------
   Shadows are cool, tinted with ink-900, never neutral black. Brand glows are
   reserved for primary CTAs and active states, never stacked on cards. */
:root{
  --shadow-xs:0 1px 2px rgba(20,24,42,.06);
  --shadow-sm:0 1px 3px rgba(20,24,42,.08),0 1px 2px rgba(20,24,42,.04);
  --shadow-md:0 4px 12px -2px rgba(20,24,42,.10),0 2px 4px -1px rgba(20,24,42,.05);
  --shadow-lg:0 12px 32px -8px rgba(20,24,42,.16),0 4px 8px -2px rgba(20,24,42,.05);
  --shadow-xl:0 28px 64px -16px rgba(20,24,42,.22),0 8px 16px -8px rgba(20,24,42,.06);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-inset-dark:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-blue:0 10px 30px -10px rgba(46,90,240,.55);
  --glow-violet:0 10px 30px -10px rgba(139,92,240,.50);
  --glow-orchid:0 10px 30px -10px rgba(199,125,235,.45);
  --blur-glass:saturate(180%) blur(16px);
  --blur-veil:blur(48px);
}
[data-theme="dark"]{
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 1px 3px rgba(0,0,0,.55);
  --shadow-md:0 6px 16px -4px rgba(0,0,0,.6);
  --shadow-lg:0 16px 40px -12px rgba(0,0,0,.7);
  --shadow-xl:0 32px 72px -20px rgba(0,0,0,.78);
}

/* --- tokens/motion.css ---------------------------------------------------
   Motion is short, decisive, and never bouncy. Things ease out and settle. */
:root{
  --dur-instant:80ms;--dur-fast:140ms;--dur-base:220ms;--dur-slow:340ms;--dur-reveal:520ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.6,0,.3,1);
  --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --ease-linear:linear;
  --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  --transition-surface:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
  --press-scale:.985;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-reveal:0ms;--press-scale:1}
}

/* --- tokens/semantic.css -------------------------------------------------
   Components read ONLY these aliases, never the raw ramps above. */
:root{
  color-scheme:light;
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--ink-0);
  --text-brand:var(--violet-700);
  --text-link:var(--blue-600);
  --text-link-hover:var(--violet-700);
  --text-on-brand:var(--ink-0);

  --surface-page:var(--ink-25);
  --surface-card:var(--ink-0);
  --surface-raised:var(--ink-0);
  --surface-sunken:var(--ink-50);
  --surface-subtle:var(--ink-100);
  --surface-inverse:var(--ink-950);
  --surface-brand:var(--brand-tech-flat);
  --surface-brand-soft:var(--violet-50);
  --surface-brand-softer:var(--blue-50);
  --surface-overlay:rgba(10,12,22,.56);
  --surface-glass:rgba(255,255,255,.72);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);
  --border-brand:var(--violet-700);
  --border-inverse:rgba(255,255,255,.14);

  /* Handoff spec, both pages: 3px ring at 30%, focus-visible only, never removed. */
  --focus-ring:0 0 0 3px rgba(46,90,240,.30);
  --focus-ring-danger:0 0 0 3px rgba(217,48,67,.28);

  --accent-success:var(--success-600);
  --accent-warning:var(--warning-600);
  --accent-danger:var(--danger-600);
  --accent-success-bg:var(--success-50);
  --accent-warning-bg:var(--warning-50);
  --accent-danger-bg:var(--danger-50);
}
[data-theme="dark"]{
  color-scheme:dark;
  --text-primary:var(--ink-0);
  --text-secondary:var(--ink-300);
  --text-muted:var(--ink-400);
  --text-faint:var(--ink-500);
  --text-inverse:var(--ink-950);
  --text-brand:var(--violet-300);
  --text-link:var(--blue-300);
  --text-link-hover:var(--violet-200);
  --text-on-brand:var(--ink-0);

  --surface-page:var(--ink-950);
  --surface-card:#111527;
  --surface-raised:#171C31;
  --surface-sunken:#080A12;
  --surface-subtle:rgba(255,255,255,.06);
  --surface-inverse:var(--ink-0);
  --surface-brand:var(--violet-400);
  --surface-brand-soft:rgba(139,92,240,.16);
  --surface-brand-softer:rgba(76,123,255,.12);
  --surface-overlay:rgba(4,5,10,.7);
  --surface-glass:rgba(17,21,39,.68);

  --border-subtle:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.24);
  --border-brand:var(--violet-400);
  --border-inverse:rgba(0,0,0,.14);

  --focus-ring:0 0 0 3px rgba(139,92,240,.30);

  --accent-success:var(--success-500);
  --accent-warning:var(--warning-500);
  --accent-danger:#F26B7A;
  --accent-success-bg:rgba(18,165,148,.14);
  --accent-warning-bg:rgba(199,122,0,.16);
  --accent-danger-bg:rgba(217,48,67,.16);
}

/* --- tokens/base.css ------------------------------------------------------
   Reset and shared primitives. Page-specific styling stays in each page. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-heading);
  margin:0;
  color:var(--text-primary);
  text-wrap:balance;
}
h1{font-size:var(--size-h1);line-height:var(--lh-h1)}
h2{font-size:var(--size-h2);line-height:var(--lh-h2)}
h3{font-size:var(--size-h3);line-height:var(--lh-h3)}
h4{font-size:var(--size-h4);line-height:var(--lh-h4)}
p{margin:0;text-wrap:pretty}
code,pre,kbd,samp{font-family:var(--font-mono);font-size:var(--size-mono)}
small{font-size:var(--size-caption);line-height:var(--lh-caption)}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-8) 0}
img,svg{max-width:100%}
::selection{background:var(--violet-200);color:var(--ink-900)}
[data-theme="dark"] ::selection{background:rgba(139,92,240,.4);color:#fff}

/* Focus is never removed anywhere on this site. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--radius-xs);
}

/* Utility primitives */
.jj-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-page)}
.jj-mono{font-family:var(--font-mono);font-size:var(--size-mono);letter-spacing:var(--tracking-mono)}
.jj-gradient-text{background:var(--gradient-spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}