/* Chris Blum portfolio — design tokens.
   A sibling of the Crexlabs system: same canvas, type, grain and glass; a personal accent pair
   (ultramarine + signal coral) and one colour environment per project.
   Order: fonts → tokens → accent variants → project themes */

/* Fonts ------------------------------------------------------------------ */
@font-face {
  font-family: Geist;
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("../assets/fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

/* Tokens ----------------------------------------------------------------- */
:root {
  --bg: #fff;
  --bg-2: #f6f8fc;
  --ink: #141c2b;
  --ink-2: #2b3646;
  --muted: #576578;
  --line: #e4e9f0;
  --line-2: #d6deea;

  /* Accent A (default): a deeper ultramarine than Crex cobalt, plus one warm signal colour.
     Coral only marks the moment that matters: a selected node, an arrival, an active marker. */
  --blue: #2a4ae0;
  --blue-bright: #3d63ff;
  --blue-deep: #1d36b8;
  --blue-pale: #b9ccff;
  --blue-wash: #eef2ff;
  --signal: #f2704a;
  --signal-soft: #ffd9cb;

  --navy: #0e1729;
  --navy-2: #15213a;
  --navy-line: #ffffff1f;
  --on-dark: #f3f6fd;
  --on-dark-muted: #b3c0d6;

  --sans: "Geist",Arial,sans-serif;
  --mono: "Geist Mono",ui-monospace,Menlo,monospace;
  --display: "General Sans","Geist",Arial,sans-serif;
  --display-weight: 600;
  --display-light: 400;
  --display-track: -.035em;
  --fs-display: clamp(46px,5.6vw,92px);
  --fs-h2: clamp(34px,3.9vw,56px);
  --fs-h3: clamp(22px,1.9vw,28px);
  --fs-lead: clamp(17px,1.35vw,19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --radius: 14px;
  --radius-lg: 22px;
  --gutter: 64px;
  --max: 1360px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  --glass: rgba(255,255,255,.72);
  --glass-line: rgba(20,28,43,.08);
  --glass-tint: rgba(255,255,255,.45);
  --glass-tint-dark: rgba(14,23,41,.55);
  --glass-blur: 8px;
  --glass-rim: inset 1px 1px 1px #ffffffb3,inset -1px -1px 1px #ffffff59;
  --glass-rim-dark: inset 1px 1px 1px #ffffff40,inset -1px -1px 1px #ffffff1a;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Canvas colours for the particle engine, read by js/signal.js (r,g,b). */
  --rgb-blue: 42,74,224;
  --rgb-signal: 242,112,74;
}

/* Accent B: Crex cobalt exactly; personality comes only from the project environments. */
html[data-accent="b"],
[data-accent="b"] {
  --blue: #315bea;
  --blue-bright: #4178ff;
  --blue-deep: #2148d6;
  --blue-pale: #b8d1ff;
  --blue-wash: #eef3ff;
  --signal: #315bea;
  --signal-soft: #c7d8ff;
  --navy: #101b2c;
  --navy-2: #16243b;
  --rgb-blue: 49,91,234;
  --rgb-signal: 49,91,234;
}

/* Project environments: one accent and tint pair per product, drawn from its own UI. */
.theme-flow {
  /* World: the case study's own dark environment (hero, themed chapters) and its soft light stage. */
  --world-base: #161619;
  --world-accent: #f28a62;
  --world-light: #ffd0b5;
  --world-ink: #fbf3ee;
  --world-muted: #c9b9af;
  --world-stage: #fbf1ea;
  --rgb-world-dot: 150,132,122;
  --rgb-world-accent: 242,138,98;
  --rgb-world-light: 255,208,181;
  --rgb-world-deep: 214,104,64;
  --accent-on-dark: #ff8a63;
  --accent-ink-on-dark: #ffb59c;
  --accent: #e2643c;
  --accent-ink: #b8461f;
  --tint: #fff1eb;
  --tint-2: #fde1d5;
}

.theme-cubie {
  /* World: the case study's own dark environment (hero, themed chapters) and its soft light stage. */
  --world-base: #1b122e;
  --world-accent: #a58aff;
  --world-light: #e8deff;
  --world-ink: #f4f0ff;
  --world-muted: #bdb2d9;
  --world-stage: #f1ecff;
  --rgb-world-dot: 128,116,168;
  --rgb-world-accent: 165,138,255;
  --rgb-world-light: 232,222,255;
  --rgb-world-deep: 110,80,220;
  --accent-on-dark: #a993ff;
  --accent-ink-on-dark: #cdbfff;
  --accent: #6c4ce6;
  --accent-ink: #5537c9;
  --tint: #f2eeff;
  --tint-2: #e4dcff;
}

.theme-biomarker {
  /* World: the case study's own dark environment (hero, themed chapters) and its soft light stage. */
  --world-base: #08262b;
  --world-accent: #4cbfa6;
  --world-light: #a8f2d6;
  --world-ink: #eefaf8;
  --world-muted: #a9c9c8;
  --world-stage: #e8f7f5;
  --rgb-world-dot: 98,140,146;
  --rgb-world-accent: 76,191,166;
  --rgb-world-light: 168,242,214;
  --rgb-world-deep: 20,130,146;
  --accent-on-dark: #7dd6bd;
  --accent-ink-on-dark: #b0ecd8;
  --accent: #0f7c86;
  --accent-ink: #0b646c;
  --tint: #e8f6f4;
  --tint-2: #d2ecec;
}

.theme-wanda {
  /* World: the case study's own dark environment (hero, themed chapters) and its soft light stage. */
  --world-base: #291627;
  --world-accent: #e9679c;
  --world-light: #ffd3c3;
  --world-ink: #fff3f1;
  --world-muted: #d6b7bf;
  --world-stage: #fdf0ee;
  --rgb-world-dot: 160,118,140;
  --rgb-world-accent: 233,103,156;
  --rgb-world-light: 255,211,195;
  --rgb-world-deep: 196,70,120;
  --accent-on-dark: #f07aa5;
  --accent-ink-on-dark: #f8b3cc;
  --accent: #c2386d;
  --accent-ink: #a12757;
  --tint: #fdf0f4;
  --tint-2: #f8dce6;
}

@media (max-width:1100px) {
  :root {
    --gutter: 36px;
  }
}

@media (max-width:900px) {
  :root {
    --gutter: 22px;
    --fs-display: clamp(42px,12.5vw,76px);
  }
}

@media (prefers-contrast:more) {
  :root {
    --muted: #3e4c60;
    --on-dark-muted: #d9e2f0;
  }
}