/* =========================================================================
   Crane Bioworks — Design Tokens (colors, type, shadows, spacing, motion)
   Source of truth derived from cranebioworks/website (DESIGN_SYSTEM.md, src/index.css,
   tailwind.config.ts).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap");

:root {
  /* -----------------------------------------------------------------------
   * BRAND ACCENTS
   * Emerald = biology (primary). Violet = AI / computation (secondary).
   * Gold = human warmth / food / collaboration (tertiary).
   * On the Crane Bioworks marketing surface, Violet is used more prominently
   * (primary CTAs, navbar buttons) than Emerald — Emerald takes a section-
   * label / accent role. Reach for both in semantic pairings.
   * --------------------------------------------------------------------- */
  --c-emerald:        #10b981;
  --c-emerald-deep:   #059669;
  --c-emerald-light:  #34d399;
  --c-emerald-50:     #ecfdf5;
  --c-emerald-100:    #d1fae5;
  --c-emerald-200:    #a7f3d0;
  --c-emerald-300:    #6ee7b7;
  --c-emerald-400:    #34d399;
  --c-emerald-500:    #10b981;
  --c-emerald-600:    #059669;
  --c-emerald-700:    #047857;
  --c-emerald-800:    #065f46;
  --c-emerald-900:    #064e3b;

  --c-violet:         #685ad9;   /* logo periwinkle — primary brand accent */
  --c-violet-muted:   #8b7cf5;
  --c-violet-deep:    #4f44b5;
  --c-violet-50:      #f5f3ff;
  --c-violet-100:     #ede9fe;
  --c-violet-200:     #ddd6fe;
  --c-violet-300:     #c4b5fd;
  --c-violet-400:     #a78bfa;
  --c-violet-500:     #8b7cf5;
  --c-violet-600:     #685ad9;
  --c-violet-700:     #4f44b5;
  --c-violet-800:     #4338ca;
  --c-violet-900:     #3730a3;

  --c-gold:           #f59e0b;
  --c-gold-light:     #fbbf24;
  --c-gold-deep:      #d97706;
  --c-gold-50:        #fffbeb;
  --c-gold-100:       #fef3c7;
  --c-gold-500:       #f59e0b;
  --c-gold-600:       #d97706;
  --c-gold-700:       #b45309;

  /* -----------------------------------------------------------------------
   * SURFACES
   * Cream is the default page background on light surfaces — warmer than
   * white, references academic / lab notebook materials. Navy anchors the
   * page (CTA + Footer) and is the body ink color.
   * --------------------------------------------------------------------- */
  --surface-cream:    #f5f0e6;     /* primary page bg */
  --surface-light:    #faf8f4;     /* card bg, elevated surfaces */
  --surface-paper:    #ffffff;     /* form inputs, high contrast */
  --surface-navy:     #223153;     /* CTA + footer + body text */
  --surface-panel:    #1a2540;     /* dark cards */
  --surface-dark:     #121a2e;     /* dark section bg */
  --surface-deep:     #0c1220;     /* deepest dark */

  /* -----------------------------------------------------------------------
   * SEMANTIC FOREGROUNDS (light theme — default)
   * Use opacity-stepped navy for hierarchy on cream.
   * --------------------------------------------------------------------- */
  --fg-1:             #223153;            /* primary ink   — headings, body */
  --fg-2:             rgba(34,49,83,0.86); /* body strong   — important paragraphs */
  --fg-3:             rgba(34,49,83,0.70); /* body          — default paragraphs */
  --fg-4:             rgba(34,49,83,0.50); /* secondary     — captions, meta */
  --fg-5:             rgba(34,49,83,0.40); /* muted         — disabled, hairlines */
  --fg-on-dark:       #f8f6f1;            /* primary on navy */
  --fg-on-dark-2:     rgba(255,255,255,0.70);
  --fg-on-dark-3:     rgba(255,255,255,0.50);
  --fg-on-dark-4:     rgba(255,255,255,0.40);

  /* Hairlines / borders */
  --border-subtle:    rgba(34,49,83,0.06);
  --border-default:   rgba(34,49,83,0.10);
  --border-strong:    rgba(34,49,83,0.20);
  --border-on-dark:   rgba(255,255,255,0.10);
  --border-on-dark-2: rgba(255,255,255,0.20);

  /* -----------------------------------------------------------------------
   * GRADIENTS
   * Use sparingly — for headline highlights and atmospheric backgrounds.
   * --------------------------------------------------------------------- */
  --gradient-emerald:           linear-gradient(135deg, #059669 0%, #10b981 100%);
  --gradient-emerald-violet:    linear-gradient(135deg, #10b981 0%, #685ad9 100%);
  --gradient-text-bio-ai:       linear-gradient(to right, #10b981, #34d399, #685ad9);
  --gradient-text-ai-bio:       linear-gradient(to right, #685ad9, #8b7cf5, #10b981);
  --gradient-violet:            linear-gradient(135deg, #4f44b5 0%, #8b7cf5 100%);
  --gradient-gold-emerald:      linear-gradient(120deg, #f59e0b, #10b981);
  --gradient-mesh-dark:         linear-gradient(135deg, #0c1220 0%, #1a2540 100%);
  --gradient-navbar-underline:  linear-gradient(to right, #685ad9, #223153);

  /* -----------------------------------------------------------------------
   * SHADOWS
   * Card / button shadows lean emerald-tinted to keep an organic warmth.
   * Violet variants sit under AI-themed cards.
   * --------------------------------------------------------------------- */
  --shadow-emerald:        rgba(16,185,129,0.15);
  --shadow-emerald-strong: rgba(16,185,129,0.25);
  --shadow-violet:         rgba(104,90,217,0.12);
  --shadow-gold:           rgba(245,158,11,0.12);
  --shadow-navy:           rgba(34,49,83,0.08);

  --shadow-card:        0 4px 20px -2px rgba(34,49,83,0.08);
  --shadow-card-hover:  0 20px 40px -8px rgba(16,185,129,0.15), 0 8px 16px -4px rgba(16,185,129,0.10);
  --shadow-card-violet: 0 20px 40px -8px rgba(104,90,217,0.18), 0 8px 16px -4px rgba(104,90,217,0.10);
  --shadow-button:      0 4px 14px 0 rgba(16,185,129,0.35);
  --shadow-button-violet: 0 4px 14px 0 rgba(104,90,217,0.32);
  --shadow-glow:        0 0 30px rgba(16,185,129,0.4);
  --shadow-nav:         0 1px 3px rgba(34,49,83,0.06);
  --shadow-modal:       0 20px 40px rgba(34,49,83,0.12);

  /* -----------------------------------------------------------------------
   * TYPOGRAPHY — FONT STACKS
   *   Plus Jakarta Sans : structure (H1–H3), UI, buttons, labels
   *   Source Serif 4    : reading body text (paragraphs, descriptions)
   *   JetBrains Mono    : technical labels, model names, code, eyebrows
   * --------------------------------------------------------------------- */
  --font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-jakarta: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-jakarta);

  /* -----------------------------------------------------------------------
   * TYPE SCALE — RAW TOKENS
   * Headings use Jakarta Sans. Body uses Source Serif 4. Tracking is tight
   * on display sizes (-0.02em) and wide on labels (0.2–0.4em).
   * --------------------------------------------------------------------- */
  --t-hero-size:        clamp(3.5rem, 6vw + 1rem, 5.5rem);
  --t-hero-leading:     0.92;
  --t-hero-tracking:    -0.02em;
  --t-hero-weight:      800;

  --t-section-size:     clamp(2.25rem, 3.2vw + 0.5rem, 3.25rem);
  --t-section-leading:  1.05;
  --t-section-tracking: -0.02em;
  --t-section-weight:   700;

  --t-card-size:        clamp(1.25rem, 1.2vw + 0.6rem, 1.5rem);
  --t-card-leading:     1.25;
  --t-card-tracking:    -0.01em;
  --t-card-weight:      700;

  --t-body-lg-size:     1.125rem;
  --t-body-lg-leading:  1.65;
  --t-body-size:        1rem;
  --t-body-leading:     1.65;
  --t-body-sm-size:     0.875rem;
  --t-body-sm-leading:  1.6;

  --t-label-size:       0.75rem;
  --t-label-leading:    1.4;
  --t-label-tracking:   0.2em;
  --t-label-weight:     600;

  --t-eyebrow-size:     0.75rem;
  --t-eyebrow-tracking: 0.2em;

  --t-mono-size:        0.8125rem;
  --t-mono-tracking:    0.02em;

  /* -----------------------------------------------------------------------
   * SPACING & RADII
   * --------------------------------------------------------------------- */
  --space-1:   0.25rem;  /*  4 */
  --space-2:   0.5rem;   /*  8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  --radius-sm:   0.5rem;   /*  8 — small ui (inputs, dense buttons) */
  --radius-md:   0.75rem;  /* 12 — default radius (--radius) */
  --radius-lg:   1rem;     /* 16 — feature cards */
  --radius-xl:   1.5rem;   /* 24 — hero panels, big cards */
  --radius-2xl:  2rem;     /* 32 — large hero / modal */
  --radius-pill: 9999px;   /* pills, badges, pill-style buttons */

  --radius:      0.75rem;

  /* -----------------------------------------------------------------------
   * MOTION
   * Default ease is ease-out. 200–300ms for buttons, 500ms for cards/panels.
   * --------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --dur-lazy:    700ms;

  /* Layout */
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
}

/* =========================================================================
   SEMANTIC TYPE PRIMITIVES
   Use these classes — or replicate inline with the tokens above — to keep
   typography on-brand without re-deriving the rules.
   ========================================================================= */

.cb-hero {
  font-family: var(--font-jakarta);
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-leading);
  letter-spacing: var(--t-hero-tracking);
  font-weight: var(--t-hero-weight);
  color: var(--fg-1);
  text-wrap: balance;
}

.cb-h1, .cb-section-title {
  font-family: var(--font-jakarta);
  font-size: var(--t-section-size);
  line-height: var(--t-section-leading);
  letter-spacing: var(--t-section-tracking);
  font-weight: var(--t-section-weight);
  color: var(--fg-1);
  text-wrap: balance;
}

.cb-h2 {
  font-family: var(--font-jakarta);
  font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--fg-1);
}

.cb-h3, .cb-card-title {
  font-family: var(--font-jakarta);
  font-size: var(--t-card-size);
  line-height: var(--t-card-leading);
  letter-spacing: var(--t-card-tracking);
  font-weight: var(--t-card-weight);
  color: var(--fg-1);
}

.cb-body-lg, p.cb-lead {
  font-family: var(--font-serif);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-leading);
  font-weight: 300;
  color: var(--fg-2);
  text-wrap: pretty;
}

.cb-body, p {
  font-family: var(--font-serif);
  font-size: var(--t-body-size);
  line-height: var(--t-body-leading);
  color: var(--fg-3);
}

.cb-body-sm {
  font-family: var(--font-serif);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-leading);
  color: var(--fg-3);
}

.cb-eyebrow, .cb-label {
  font-family: var(--font-jakarta);
  font-size: var(--t-eyebrow-size);
  letter-spacing: var(--t-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-emerald-600);
}

.cb-eyebrow--violet { color: var(--c-violet); }
.cb-eyebrow--mono { font-family: var(--font-mono); letter-spacing: 0.4em; color: var(--fg-4); }

.cb-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  letter-spacing: var(--t-mono-tracking);
}

.cb-text-gradient {
  background: var(--gradient-text-bio-ai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cb-text-gradient-ai {
  background: var(--gradient-text-ai-bio);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Body defaults — keep links and selection on-brand. */
::selection { background: rgba(16,185,129,0.30); color: var(--fg-1); }

a.cb-link {
  color: var(--c-violet);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a.cb-link:hover { color: var(--c-violet-deep); }