/* ==========================================================================
   Mancers Info Services — Design Tokens
   Palette extracted from the brand mark; typography pairs a geometric
   display face with a humanist body face and a mono face for data/labels.
   ========================================================================== */

:root{
  /* ---- brand color ---- */
  --ink:            #0A0F1C;   /* primary text, near-black w/ blue bias */
  --ink-soft:       #2C3550;   /* secondary text */
  --ink-muted:      #5C6784;   /* tertiary text / captions */
  --ink-faint:      #97A1BE;   /* placeholders, disabled */

  --paper:          #FBFCFF;   /* page background */
  --surface:        #FFFFFF;   /* card/panel background */
  --surface-sunken: #F1F4FA;   /* recessed panels, alternating sections */
  --border:         #E1E6F0;
  --border-strong:  #C8D0E3;

  --brand:          #135BB6;   /* core wordmark blue — primary actions */
  --brand-deep:     #0C4085;
  --brand-bright:   #1878F3;
  --sky:            #26B5FB;   /* mark gradient bright end */
  --magenta:        #E14F8E;   /* text/icon-safe version of logo magenta */
  --violet:         #6B3999;
  --gold:           #C68A1E;

  /* raw logo-accurate hues, for gradients/decoration only — not for text */
  --grad-magenta:   #FB619E;
  --grad-violet:    #8241B4;
  --grad-sky:       #26B5FB;
  --grad-orange:    #FAA75C;
  --grad-gold:      #F9D235;

  --brand-gradient: linear-gradient(120deg, var(--grad-magenta) 0%, var(--grad-violet) 45%, var(--grad-sky) 100%);
  --warm-gradient:  linear-gradient(120deg, var(--grad-orange) 0%, var(--grad-gold) 100%);

  /* semantic */
  --success: #1E8E5A;
  --focus:   #1878F3;

  /* ---- type ---- */
  --font-display: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem);
  --step-5:  clamp(3rem, 2.2rem + 3.6vw, 4.6rem);

  /* ---- layout ---- */
  --content-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,15,28,0.05), 0 2px 8px -2px rgba(10,15,28,0.06);
  --shadow-md: 0 4px 16px -4px rgba(10,15,28,0.12), 0 12px 32px -8px rgba(10,15,28,0.10);
  --shadow-lg: 0 12px 40px -8px rgba(10,15,28,0.22);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}

/* Section motif accents — same brand hues, used to give each vertical a
   distinct (but still on-brand) identity via icon/pattern color, not a
   different hue system. */
:root{
  --motif-software: var(--brand);
  --motif-ai:       var(--sky);
  --motif-agri:     #3E8E5B;   /* olive-leaning green, kept close to brand blue in value so it reads as accent, not a new brand color */
  --motif-pharma:   var(--magenta);
  --motif-products: var(--violet);
}