/* =========================================================================
   ZtechBPO — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow.
   ========================================================================= */
:root {
  /* Brand */
  --zt-primary:        #16345E;  /* deep tech blue — trust/authority */
  --zt-primary-700:    #0F2540;  /* navy — dark bands */
  --zt-primary-300:    #4F73A8;
  --zt-accent:         #0FB5BD;  /* teal/cyan — CTAs, AI energy */
  --zt-accent-600:     #0C9298;
  --zt-accent-300:     #6FE0E4;
  --zt-violet:         #6C5CE7;  /* tech accent (sparing) */

  /* Ink & surfaces */
  --zt-ink:            #0E1726;  /* primary text */
  --zt-muted:          #5B6B82;  /* secondary text */
  --zt-faint:          #8A98AC;
  --zt-bg:             #FFFFFF;
  --zt-bg-alt:         #F5F7FA;  /* alt section background */
  --zt-surface:        #FFFFFF;
  --zt-border:         #E3E8EF;
  --zt-border-strong:  #CDD6E3;
  --zt-dark:           #0F2540;  /* dark band bg */
  --zt-dark-2:         #122c52;

  /* Status */
  --zt-success:        #16A34A;
  --zt-warning:        #D97706;
  --zt-danger:         #DC2626;

  /* Gradients */
  --zt-grad-accent: linear-gradient(135deg, var(--zt-accent) 0%, var(--zt-violet) 100%);
  --zt-grad-dark:   linear-gradient(160deg, #143a6b 0%, var(--zt-primary-700) 100%);
  --zt-grad-hero:   radial-gradient(1200px 600px at 75% -10%, rgba(15,181,189,.18), transparent 60%),
                    radial-gradient(900px 500px at 10% 10%, rgba(108,92,231,.12), transparent 55%);

  /* Typography */
  --zt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --zt-fs-hero:   clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem);
  --zt-fs-h1:     clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --zt-fs-h2:     clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem);
  --zt-fs-h3:     clamp(1.2rem, 1rem + .7vw, 1.5rem);
  --zt-fs-lead:   clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --zt-fs-base:   1rem;
  --zt-fs-sm:     .9rem;
  --zt-fs-xs:     .8rem;
  --zt-lh-tight:  1.15;
  --zt-lh-base:   1.65;

  /* Spacing scale (4px base) */
  --zt-1: .25rem; --zt-2: .5rem; --zt-3: .75rem; --zt-4: 1rem;
  --zt-5: 1.5rem; --zt-6: 2rem; --zt-7: 3rem; --zt-8: 4rem; --zt-9: 6rem;

  /* Radius */
  --zt-radius-sm: 8px;
  --zt-radius:    14px;
  --zt-radius-lg: 22px;
  --zt-radius-pill: 999px;

  /* Shadow */
  --zt-shadow-sm: 0 1px 2px rgba(16,23,38,.06), 0 1px 3px rgba(16,23,38,.05);
  --zt-shadow:    0 6px 18px rgba(16,23,38,.08);
  --zt-shadow-md: 0 14px 38px rgba(16,23,38,.10);
  --zt-shadow-lg: 0 30px 70px rgba(16,23,38,.16);
  --zt-shadow-accent: 0 10px 30px rgba(15,181,189,.28);

  /* Layout */
  --zt-container: 1200px;
  --zt-section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* Map a few Bootstrap variables to the brand */
  --bs-primary: var(--zt-primary);
  --bs-link-color: var(--zt-accent-600);
  --bs-link-hover-color: var(--zt-primary);
  --bs-body-color: var(--zt-ink);
  --bs-body-font-family: var(--zt-font);
  --bs-border-color: var(--zt-border);
}