@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* Aibolone — Color tokens — "Premium Bio-Tech & AI Laboratory" */
:root {
  /* --- Base palette --- */
  /* Sterile mint surface family */
  --mint-50:  #F2F8F5;
  --mint-100: #E6F1EB;
  --mint-200: #D4E7DE; /* dominant background */
  --mint-300: #C0DACE;
  --mint-400: #A7CABA;

  /* Bio-Tech Green accent family */
  --green-300: #5FD9BB;
  --green-400: #2BC79E;
  --green-500: #0CB789; /* primary accent / corpo */
  --green-600: #0A9C74;
  --green-700: #07795A;

  /* Charcoal / Slate ink family */
  --slate-900: #0F172A;
  --slate-800: #1E293B; /* primary text */
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;

  --white: #FFFFFF;

  /* Semantic — surfaces */
  --surface-base:     #F2F2F2;            /* page background */
  --surface-raised:   #ECECEC;
  --surface-card:     var(--white);      /* clinical white cards */
  --surface-glass:    rgba(255, 255, 255, 0.62);
  --surface-inset:    #E9E9E9;

  /* Semantic — text */
  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-800);
  --text-muted:    var(--slate-600);
  --text-subtle:   var(--slate-500);
  --text-on-accent: var(--white);
  --text-heading:  var(--green-500); /* official headings use accent */

  /* Semantic — accent */
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-soft:   rgba(12, 183, 137, 0.10);
  --accent-glow:   rgba(12, 183, 137, 0.35);

  /* Semantic — borders */
  --border-hairline: rgba(12, 183, 137, 0.18);
  --border-soft:     rgba(30, 41, 59, 0.08);
  --border-strong:   rgba(12, 183, 137, 0.45);

  /* Status */
  --status-live:   var(--green-500);
  --status-warn:   #E0A100;
  --status-error:  #DC4C4C;
}

/* Aibolone — Typography tokens */
:root {
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — enlarged, modern bold */
  --text-display: 88px;
  --text-h1:      64px;
  --text-h2:      48px;
  --text-h3:      32px;
  --text-h4:      24px;
  --text-lg:      20px;
  --text-base:    18px;
  --text-sm:      15px;
  --text-xs:      13px;
  --text-2xs:     11px; /* eyebrow / kicker labels */

  /* Weights */
  --weight-light:    400;
  --weight-regular:  500;
  --weight-medium:   600;
  --weight-semibold: 700;
  --weight-bold:     800;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal:1.55;

  /* Tracking — the brand leans on wide uppercase eyebrows */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.1em;
  --tracking-eyebrow:0.3em;
}

/* Aibolone — Spacing, radius, shadow, motion tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — clinical, softly rounded */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Shadows — soft, diffuse, lab-clean (cool slate tint) */
  --shadow-xs: 0 1px 2px rgba(30, 41, 59, 0.06);
  --shadow-sm: 0 2px 8px rgba(30, 41, 59, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 41, 59, 0.08);
  --shadow-lg: 0 20px 48px rgba(30, 41, 59, 0.10);
  --shadow-glow: 0 0 28px var(--accent-glow);
  --shadow-glow-lg: 0 0 48px var(--accent-glow), 0 8px 24px rgba(30,41,59,0.08);

  /* Motion — ultra-smooth premium transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   0.25s; /* @kind other */
  --dur-base:   0.4s;  /* @kind other */ /* spec default: transition: all 0.4s ease-in-out */
  --dur-slow:   0.5s; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-smooth);
}

/* Aibolone — base element styles & helper classes */
* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: 0;
}

a { color: inherit; text-decoration: none; transition: var(--transition-base); }

::selection { background: var(--accent); color: var(--white); }

/* Brand-wide laboratory grid texture, opt-in */
.ds-lab-grid {
  background-image:
    linear-gradient(rgba(12,183,137,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,183,137,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Eyebrow / kicker label */
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Live status dot */
.ds-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: ds-pulse 3s infinite var(--ease-smooth);
}
@keyframes ds-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Hero ambient orb animations */
@keyframes orb-a {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1; }
  25%       { transform: translateX(calc(-50% - 55px)) translateY(70px)  scale(1.10); opacity: 0.85; }
  50%       { transform: translateX(calc(-50% + 10px)) translateY(30px)  scale(1.05); opacity: 1; }
  75%       { transform: translateX(calc(-50% + 45px)) translateY(-35px) scale(0.94); opacity: 0.9; }
}
@keyframes orb-b {
  0%, 100% { transform: translate(0, 0)        scale(1);    opacity: 1; }
  50%       { transform: translate(65px, -80px) scale(1.15); opacity: 0.8; }
}
@keyframes orb-c {
  0%, 100% { transform: translate(0, 0)         scale(1);    opacity: 1; }
  50%       { transform: translate(-55px, 62px)  scale(1.12); opacity: 0.8; }
}