/* ═══════════════════════════════════════════════════════════
   Horváth AI · Use Case Library — Design Tokens
   Extracted from horvath-ai-dashboard.html · July 2026
   ═══════════════════════════════════════════════════════════ */
:root{
  /* ── color · brand ── */
  --petrol:      #05415a;  /* primary brand color, headings, buttons          */
  --petrol-deep: #032b3d;  /* hero/footer gradient start, darkest surface     */
  --petrol-mid:  #0a5870;  /* hover states, secondary petrol                  */
  --teal-light:  #a4dad2;  /* outlines, dashed connectors, soft accents       */
  --accent:      #14e6d7;  /* signature cyan — kickers, highlights, rings     */

  /* ── color · neutrals ── */
  --text:        #22333b;  /* body text                                       */
  --text-soft:   #5d7079;  /* secondary text, labels                          */
  --bg:          #f3f5f6;  /* tinted section background                       */
  --card:        #ffffff;  /* base surface                                    */
  --line:        #e2e8ea;  /* hairlines, borders                              */

  /* ── color · on petrol ── */
  --on-petrol:        #ffffff;
  --on-petrol-soft:   rgba(255,255,255,0.7);
  --on-petrol-muted:  rgba(255,255,255,0.55);
  --on-petrol-line:   rgba(255,255,255,0.28);
  --accent-line:       rgba(20,230,215,0.45);
  --accent-wash:       rgba(20,230,215,0.1);
  --accent-wash-hover: rgba(20,230,215,0.22);

  /* ── typography ── */
  --font-display:"Archivo","Segoe UI",sans-serif;        /* 500–800 · headings, step names   */
  --font-body:   "IBM Plex Sans","Segoe UI",sans-serif;  /* 400–600 · body copy              */
  --font-mono:   "IBM Plex Mono",Consolas,monospace;     /* 500–600 · numbers, labels, CTAs  */

  /* ── type scale ── */
  --fs-h1:    clamp(40px, 5.4vw, 64px);  /* hero headline · 800                  */
  --fs-h2:    clamp(30px, 3.6vw, 42px);  /* chapter title · 800                  */
  --fs-lead:  16.5px;                    /* chapter lead paragraph               */
  --fs-body:  15px;                      /* base                                 */
  --fs-small: 13.5px;                    /* lists, secondary copy                */

  /* ── letterspacing ── */
  --ls-tight:  -0.02em;   /* display headings         */

  /* ── shape & elevation ── */
  --radius-card: 16px;
  --radius-btn:  9px;
  --radius-chip: 8px;
  --shadow-btn:  0 10px 24px -10px rgba(5,65,90,.45);

  /* ── layout ── */
  --wrap-max:      1120px;
  --wrap-pad:      32px;
  --section-pad-y: 92px;

  /* ── gradients ── */
  --grad-hero:   linear-gradient(150deg, var(--petrol-deep) 0%, var(--petrol) 58%, var(--petrol-mid) 100%);
  --grad-accent: linear-gradient(90deg, var(--accent), var(--teal-light));
  --grad-bullet: linear-gradient(135deg, var(--accent), var(--teal-light));

  /* ── motion ── */
  --ease-reveal: cubic-bezier(.2,.7,.2,1);
  --dur-reveal:  .6s;
  --dur-hover:   .18s;
}