/* =============================================================
   PlusBIT Systems — Design Tokens
   Theme: "Clinical Premium" — warm paper, deep teal-emerald,
   a single warm coral signal. Built around the "+" mark.
   All sizing is fluid (clamp) so the layout breathes from 320px up.
   ============================================================= */

:root {
  /* ---- Surfaces (warm, never sterile pure-white background) ---- */
  --paper:        #F5F3EE;   /* page background — warm paper          */
  --paper-2:      #EDEAE1;   /* alternating band / recessed areas     */
  --surface:      #FFFFFF;   /* cards / panels                        */
  --surface-2:    #FBFAF6;   /* subtle alt surface                    */

  /* ---- Ink (near-black deep teal, warmer than navy) ---- */
  --ink:          #0C1B18;   /* headings + primary text               */
  --ink-soft:     #36504B;   /* body / secondary                      */
  --muted:        #5F726D;   /* captions / meta (AA on paper)         */
  --faint:        #8A9994;   /* hairline labels                       */

  /* ---- Lines (warm, low-contrast) ---- */
  --line:         #E3DFD5;
  --line-strong:  #D4CFC3;

  /* ---- Primary: deep clinical teal-emerald ---- */
  --primary:      #0B7D6E;   /* fills, icons, accents                 */
  --primary-700:  #095F54;   /* text-on-light (passes AA)             */
  --primary-300:  #6BC3B3;   /* soft mint                             */
  --primary-bright:#19C2A4;  /* highlight on dark surfaces            */
  --primary-tint:   rgba(11, 125, 110, 0.07);
  --primary-tint-2: rgba(11, 125, 110, 0.13);
  --primary-line:   rgba(11, 125, 110, 0.22);

  /* ---- Signal: warm coral (live / urgent / used sparingly) ---- */
  --signal:       #DB6448;
  --signal-700:   #B44C34;
  --signal-tint:  rgba(219, 100, 72, 0.10);

  /* ---- Deep sections (story moments: AI journey, final CTA) ---- */
  --deep:         #07201C;
  --deep-2:       #0B2C26;
  --deep-line:    rgba(255, 255, 255, 0.10);
  --on-deep:      #EAF3F0;
  --on-deep-soft: rgba(234, 243, 240, 0.60);
  --on-deep-faint:rgba(234, 243, 240, 0.38);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale */
  --fz-eyebrow: 0.72rem;
  --fz-meta:    0.78rem;
  --fz-small:   0.86rem;
  --fz-body:    1.02rem;
  --fz-lead:    clamp(1.06rem, 0.95rem + 0.5vw, 1.25rem);
  --fz-h3:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --fz-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.3rem);
  --fz-h1:      clamp(2.7rem, 1.6rem + 4.6vw, 5.1rem);
  --fz-display: clamp(3rem, 1.4rem + 6vw, 6rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.68;

  --tracking-eyebrow: 0.22em;

  /* ---- Spacing ---- */
  --space-section: clamp(74px, 6vw + 36px, 148px);
  --gutter:        clamp(20px, 5vw, 48px);
  --shell:         1200px;

  /* ---- Radii (restrained — not everything is a rounded pill) ---- */
  --r-lg: 20px;
  --r:    13px;
  --r-sm: 9px;
  --r-pill: 999px;

  /* ---- Elevation (soft, warm-tinted, used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(12, 27, 24, 0.05);
  --shadow:    0 14px 34px -18px rgba(12, 27, 24, 0.20);
  --shadow-lg: 0 36px 70px -30px rgba(12, 27, 24, 0.30);
  --shadow-deep: 0 30px 60px -24px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:   0.45s;
  --dur-2: 0.7s;

  /* ---- Layout helpers ---- */
  --nav-h: 72px;
}