/* ==========================================================================
   Rogers Lab — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   Palette derived from the DFR Calipers brand icon (teal -> green gradient).
   Change values here to restyle the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webfonts — self-hosted (no CDN), so --font-sans below actually resolves.
   Inter, SIL Open Font License 1.1 (see assets/fonts/LICENSE-Inter.txt).
   Variable weight axis 100-900 in a single file, latin subset, from the
   @fontsource-variable/inter npm package. url()s are relative to THIS file,
   so they resolve from every page regardless of directory depth.
   No unicode-range on purpose: the subset omits some symbols the site uses
   (e.g. -> and >=), and per-glyph fallback down --font-sans handles those.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;      /* covers --fw-normal .. --fw-bold from one file */
  font-display: swap;        /* text paints immediately in the fallback */
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
}

:root {
  /* ---- Brand palette (teal -> green) ---- */
  --brand-teal:        #16C2C9;
  --brand-teal-deep:   #0E9AA6;
  --brand-green:       #3FC56B;
  --brand-green-deep:  #2A9D54;
  --brand-gradient:    linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-green) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(22,194,201,0.16) 0%, rgba(63,197,107,0.16) 100%);

  /* ---- Pinned / highlighted accent (editorial emphasis, not brand) ---- */
  --gold:              #E8B93F;
  --gold-deep:         #C99A26;
  --gold-gradient:     linear-gradient(135deg, #F2CB63 0%, #D9A62E 100%);
  --gold-soft:         rgba(232, 185, 63, 0.10);
  --gold-border:       rgba(232, 185, 63, 0.5);
  --gold-glow:         0 0 0 1px rgba(232, 185, 63, 0.22), 0 8px 28px rgba(232, 185, 63, 0.14);

  /* ---- Dark surfaces (teal-tinged near-black) ---- */
  --bg:            #0B1417;   /* page background */
  --bg-2:          #0F1D21;   /* alt section background */
  --surface:       #13262B;   /* cards */
  --surface-2:     #18313700; /* (transparent helper, unused placeholder) */
  --surface-hi:    #1B343B;   /* raised / hover card */
  --border:        #21424A;   /* hairlines on dark */
  --border-soft:   #1A343A;

  /* ---- Text ---- */
  --text:          #EAF3F3;   /* primary */
  --text-muted:    #9DB4B7;   /* secondary */
  --text-faint:    #6E8A8E;   /* tertiary / captions */
  --text-on-brand: #06201F;   /* text sitting on a bright brand fill */

  /* ---- Accent links ---- */
  --link:          #45D2C2;
  --link-hover:    #6FE6D6;

  /* ---- Functional ---- */
  --focus-ring:    #5BE0D0;
  --danger:        #E0564B;

  /* ---- Typography ---- */
  --font-sans: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Not self-hosted: nothing in the site references --font-mono yet, so shipping
     JetBrains Mono would be dead weight. Add an @font-face above (it is also
     OFL-1.1) the first time something actually uses it. */
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.25rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadow / elevation ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.45);
  --glow-brand: 0 8px 32px rgba(22,194,201,0.18);

  /* ---- Layout ---- */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --header-h: 64px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}