/* ==========================================================================
   STRONEX — Design tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Everything else references these custom properties.
   ========================================================================== */

:root {
  /* Brand -------------------------------------------------------------- */
  --c-orange:        #E8590C;   /* primary accent            */
  --c-orange-hover:  #C24E0B;   /* accent hover / darker     */
  --c-orange-tint:   #FFF1E8;   /* pale accent background    */
  --c-orange-tint-2: #FFF8F3;   /* even paler section tint   */
  --c-orange-border: #FBD9C2;   /* accent border             */
  --c-orange-soft:   #FDBA8C;   /* accent on dark bg         */

  /* Neutrals ----------------------------------------------------------- */
  --c-ink:      #161C26;        /* headings / near-black     */
  --c-ink-2:    #1A2029;        /* footer background         */
  --c-ink-3:    #0F141C;        /* darkest panel             */
  --c-slate:    #1E2530;        /* body text                 */
  --c-slate-2:  #334155;        /* strong secondary text     */
  --c-slate-3:  #475569;        /* secondary text            */
  --c-slate-4:  #64748B;        /* muted text                */
  --c-slate-5:  #94A3B8;        /* faint text / captions     */

  /* Surfaces & borders ------------------------------------------------- */
  --c-bg:        #FFFFFF;
  --c-bg-2:      #FBFCFD;       /* very light panel          */
  --c-bg-3:      #F8FAFC;       /* light section background  */
  --c-border:    #E6EBF1;       /* card borders              */
  --c-border-2:  #EEF2F6;       /* hairline dividers         */
  --c-border-3:  #E2E8F0;       /* stronger borders          */

  /* Panel-on-dark ------------------------------------------------------ */
  --c-dark-panel:  #141A23;
  --c-dark-border: #232C37;
  --c-dark-text:   #A8B3C2;

  /* Feedback ----------------------------------------------------------- */
  --c-green:  #1F8A5B;
  --c-amber:  #E8A93B;
  --c-red:    #DC2626;

  /* Typography --------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Fluid type scale (min, preferred, max) ----------------------------- */
  --fs-display: clamp(2.4rem, 4.2vw, 3.5rem);
  --fs-h1:      clamp(2.3rem, 4vw, 3.3rem);
  --fs-h2:      clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3:      1.25rem;
  --fs-lead:    1.1875rem;   /* 19px */
  --fs-body:    1rem;        /* 16px */
  --fs-sm:      0.875rem;    /* 14px */
  --fs-xs:      0.8125rem;   /* 13px */

  /* Spacing scale ------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radii -------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadows ------------------------------------------------------------ */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 12px 28px -14px rgba(15, 23, 42, 0.18);
  --shadow-lg:  0 30px 60px -20px rgba(15, 23, 42, 0.25);
  --shadow-cta: 0 8px 22px rgba(232, 89, 12, 0.24);

  /* Layout ------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 820px;
  --nav-h: 72px;

  /* Breakpoints (for reference; used in media queries) ----------------- */
  /* --bp-tablet: 860px;  --bp-phone: 560px; */
}