/* ==========================================================================
   S2O — "Goji" design tokens
   Warm coral on white. Fustat display · DM Mono labels · Inter body.
   Derived from the gojiberry teardown (website/gojiberry-design-system.md).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- grounds & ink ---- */
  --white:#FFFFFF;
  --off:#FAFAF8;
  --paper:#F6F5F2;
  --line:#ECEBE7;
  --line-2:#E2E0DA;
  --black:#0A0A0A;          /* near-black ink, never pure */
  --ink-2:#3A3A38;
  --body:#5E5E5C;
  --muted:#8A8A86;

  /* ---- the goji ramp ---- */
  --coral:#FF5C2E;          /* primary accent */
  --coral-600:#F0491B;      /* hover */
  --coral-lt:#FF6F42;
  --peach:#FD8A6B;
  --amber:#FA8B1E;
  --yellow:#FBEF76;
  --gold:#FAC800;
  --brown:#662000;

  /* ---- secondary accent ---- */
  --blue:#0099FF;
  --blue-tint:#E3EBFF;

  /* ---- signature gradients ---- */
  --goji:linear-gradient(100deg,#FF5C2E 0%,#FF6F42 45%,#FD8A6B 100%);
  --goji-soft:linear-gradient(180deg,#FFE9DD 0%,#FFF5EF 45%,#FFFFFF 100%);
  --goji-radial:radial-gradient(60% 55% at 50% 42%,rgba(255,92,46,.20) 0%,rgba(253,138,107,.10) 40%,rgba(255,255,255,0) 72%);

  /* ---- type ---- */
  --f-display:"Fustat","Hanken Grotesk",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;

  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,1.9rem);
  --step-3:clamp(2rem,1.6rem + 2vw,2.9rem);
  --step-4:clamp(2.6rem,1.9rem + 3.4vw,4.3rem);
  --step-5:clamp(3rem,2rem + 5vw,5.6rem);   /* hero */

  /* ---- shape ---- */
  --r-pill:100px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;
  --r-xs:8px;

  /* ---- elevation (warm, soft) ---- */
  --sh-sm:0 1px 2px rgba(40,20,10,.05), 0 2px 8px rgba(40,20,10,.04);
  --sh-md:0 6px 18px -6px rgba(60,30,15,.12), 0 2px 6px rgba(60,30,15,.05);
  --sh-lg:0 24px 60px -18px rgba(70,35,18,.22), 0 8px 20px -8px rgba(70,35,18,.10);
  --sh-glow:0 20px 70px -20px rgba(255,92,46,.35);

  /* ---- layout ---- */
  --wrap:1200px;
  --wrap-narrow:900px;
  --gut:clamp(20px,5vw,64px);
  --sect:clamp(80px,11vw,168px);

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;background:var(--white);color:var(--black);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2.5px solid var(--coral);outline-offset:3px;border-radius:4px;}

/* utility type */
.mono{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.12em;font-size:var(--step--1);}
.display{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.0;}
.grad-text{background:var(--goji);-webkit-background-clip:text;background-clip:text;color:transparent;}