/* =========================================================================
   Glucagon Research — design tokens
   Load order: tokens.css -> base.css -> components.css
   Light only. There is no dark mode in this system.
   ========================================================================= */

:root {
  /* ---------- brand (client docx, verbatim) ---------------------------- */
  --brand-emerald:  #0F6D63;
  --brand-graphite: #1B2633;
  --brand-white:    #FFFFFF;
  --brand-surface:  #F7F9FB;
  --brand-mint:     #2ED3B7;
  --brand-neutral:  #6C7888;

  /* ---------- emerald ramp (derived from #0F6D63) ---------------------- */
  --emerald-50:  #F0F8F6;
  --emerald-100: #DCEFEC;
  --emerald-200: #B6DED8;
  --emerald-300: #86C7BE;
  --emerald-400: #4FA79B;
  --emerald-500: #2A8B7E;
  --emerald-600: #0F6D63;   /* brand */
  --emerald-700: #0C5A52;
  --emerald-800: #0A4841;
  --emerald-900: #073531;

  /* ---------- mint ramp (accent, use sparingly) ------------------------ */
  --mint-50:  #EAFBF6;
  --mint-100: #D2F6EC;
  --mint-200: #A8EEDC;
  --mint-300: #6FE2C9;
  --mint-400: #2ED3B7;      /* accent */
  --mint-500: #1FB69D;
  --mint-600: #159685;

  /* ---------- graphite / neutral ramp ---------------------------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FBFCFD;
  --n-50:  #F7F9FB;         /* surface */
  --n-100: #EFF3F6;
  --n-200: #E2E8EE;
  --n-300: #CBD4DD;
  --n-400: #A7B2BF;
  --n-500: #8894A3;
  --n-600: #6C7888;         /* neutral */
  --n-700: #4A5666;
  --n-800: #2E3A49;
  --n-900: #1B2633;         /* graphite */

  /* ---------- semantic -------------------------------------------------- */
  --bg:            var(--n-0);
  --bg-tint:       var(--emerald-50);
  --surface:       var(--n-50);
  --surface-2:     var(--n-100);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --text:          var(--n-900);
  --text-soft:     var(--n-700);
  --muted:         var(--n-600);
  --brand:         var(--emerald-600);
  --brand-hover:   var(--emerald-700);
  --brand-soft:    var(--emerald-50);
  --accent:        var(--mint-400);
  --accent-soft:   var(--mint-50);
  --line:          var(--n-200);
  --line-soft:     var(--n-100);
  --line-strong:   var(--n-300);
  --success:       #12856F;
  --success-soft:  #E7F6F1;
  --warn:          #A9701A;
  --warn-soft:     #FBF3E4;
  --danger:        #B23A2B;
  --danger-soft:   #FBEDEB;
  --focus:         var(--emerald-500);

  /* one gradient, used once per page at most */
  --gradient-mint: linear-gradient(135deg, var(--mint-50) 0%, var(--emerald-50) 55%, #FFFFFF 100%);

  /* ---------- radii ----------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---------- shadows (very soft — this is not a shadow-heavy brand) ---- */
  --shadow-xs: 0 1px 2px rgba(27, 38, 51, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 38, 51, 0.04), 0 2px 8px rgba(27, 38, 51, 0.04);
  --shadow-md: 0 2px 6px rgba(27, 38, 51, 0.04), 0 12px 28px -12px rgba(27, 38, 51, 0.10);
  --shadow-lg: 0 2px 6px rgba(27, 38, 51, 0.04), 0 32px 64px -32px rgba(27, 38, 51, 0.16);
  --shadow-header: 0 1px 0 var(--line), 0 6px 24px -18px rgba(27, 38, 51, 0.28);

  /* ---------- spacing --------------------------------------------------- */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;
  --section-y: clamp(56px, 8vw, 112px);   /* vertical rhythm between sections */

  /* ---------- type ------------------------------------------------------ */
  --font: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --fs-display:    clamp(38px, 5.2vw, 56px);
  --fs-display-md: clamp(32px, 4.2vw, 44px);
  --fs-display-sm: clamp(28px, 3.4vw, 36px);
  --fs-h1:   clamp(30px, 3.4vw, 36px);
  --fs-h2:   clamp(24px, 2.6vw, 28px);
  --fs-h3:   22px;
  --fs-h4:   18px;
  --fs-body: 17px;
  --fs-sm:   15px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  --lh-display: 1.06;
  --lh-heading: 1.20;
  --lh-body:    1.62;
  --lh-tight:   1.35;

  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-body:     0;
  --ls-wide:     0.06em;
  --ls-eyebrow:  0.16em;   /* section eyebrows, chips, the wordmark */

  /* ---------- layout ---------------------------------------------------- */
  --container:        1200px;
  --container-wide:   1360px;   /* editorial / full-bleed-ish sections */
  --container-narrow: 720px;    /* long-form legal + policy copy */
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 72px;

  /* ---------- motion ----------------------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  --z-header: 100;
  --z-drawer: 200;
}