/* ============================================================
   OBSIDIAN PEPTIDES — Scientific Luxury design system
   ============================================================ */

:root{
  /* Core palette — Obsidian Labs brand book v1 */
  --black:        #000000;
  --obsidian:     #0E0012;   /* obsidian black base */
  --ink:          #16161B;   /* graphite 900 — deep panels */
  --ink-2:        #232229;   /* graphite — raised surfaces / cards */
  --white:        #FFFFFF;
  --paper:        #F3F2F4;   /* cool off-white info sections */
  --paper-2:      #E9E8EC;   /* slightly deeper light tone */
  --paper-3:      #DDDBE1;

  /* Accent — graphite hatch system (token names kept for compat) */
  --gold:         #A8A7B0;   /* gray 300 — accent on dark */
  --gold-bright:  #C9C8D2;
  --gold-dim:     #686A75;   /* gray 500 */
  --gold-deep:    #44434C;   /* gray 700 — hairlines */

  /* Functional signals */
  --verified:     #1E7A4D;
  --caution:      #9A6A00;
  --critical:     #A8322E;
  --coldchain:    #185FAA;

  /* Neutral grays */
  --steel:        #8C8C92;
  --steel-light:  #B7B7BC;
  --steel-dark:   #5A5A60;

  /* Text */
  --on-dark:        #F4F3F1;
  --on-dark-soft:   #B9B9BE;
  --on-dark-faint:  #74747A;
  --on-light:       #16161A;
  --on-light-soft:  #57575E;
  --on-light-faint: #8E8E96;

  /* Lines */
  --line-dark:   rgba(255,255,255,0.12);
  --line-darker: rgba(255,255,255,0.07);
  --line-light:  rgba(16,16,20,0.12);
  --line-lighter:rgba(16,16,20,0.07);

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Archivo", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Tracking */
  --track-display: 0.02em;
  --track-label:   0.26em;
  --track-eyebrow: 0.34em;

  /* Layout */
  --maxw: 1320px;
  --pad:  clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--obsidian);
  color:var(--on-light);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
input{ font-family:inherit; }
::selection{ background:var(--gold); color:var(--black); }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--obsidian); }
::-webkit-scrollbar-thumb{ background:#2a2a2e; border-radius:20px; border:3px solid var(--obsidian); }
::-webkit-scrollbar-thumb:hover{ background:#3a3a40; }

#root{ min-height:100vh; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:11px;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
}
.label-xs{
  font-family:var(--display);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:var(--track-display);
  text-transform:uppercase;
  line-height:1.02;
  margin:0;
}
.serif{ font-family:var(--display); }

/* Section scaffolding */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--gold);
  --fg: var(--black);
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  padding:16px 26px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn .arr{ transition:transform .45s var(--ease); display:inline-block; }
.btn:hover .arr{ transform:translateX(5px); }
.btn:active{ transform:scale(.985); }

.btn--gold{ --bg:var(--gold); --fg:#161310; }
.btn--gold:hover{ --bg:var(--gold-bright); }
.btn--ghost{ --bg:transparent; --fg:var(--on-dark); border-color:rgba(255,255,255,0.4); }
.btn--ghost:hover{ background:rgba(255,255,255,0.08); border-color:var(--on-dark); }
.btn--ink{ --bg:var(--ink); --fg:var(--white); border-color:var(--ink); }
.btn--ink:hover{ --bg:#000; }
.btn--block{ width:100%; justify-content:center; }
.btn--lg{ padding:19px 34px; font-size:12.5px; }

.txt-link{
  font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:0.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  position:relative; padding-bottom:3px;
}
.txt-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); opacity:.6; }
.txt-link:hover::after{ transform:scaleX(1); }
.txt-link .arr{ transition:transform .45s var(--ease); }
.txt-link:hover .arr{ transform:translateX(4px); }

/* hairline */
.hr{ height:1px; background:var(--line-light); border:0; margin:0; }
.hr-dark{ height:1px; background:var(--line-dark); border:0; margin:0; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}