/* ==========================================================================
   Suthar Technologies — frontend3
   Editorial / AI-native direction. Bone-white canvas with full-bleed ink
   panels for contrast. Signal orange accent.
   ========================================================================== */

:root {
  /* ---- Canvas ---- */
  --bone:      #F2F0EB;   /* primary page background, warm off-white */
  --bone-2:    #E8E5DE;   /* recessed band */
  --white:     #FFFFFF;   /* raised cards */

  /* ---- Ink (used for full-bleed contrast panels — the "mix") ---- */
  --ink:       #0D0D0F;
  --ink-2:     #17171A;
  --ink-3:     #2A2A2E;

  /* ---- Text ---- */
  --text:      #0D0D0F;
  --text-2:    #43434A;
  --grey:      #82828A;
  --on-ink:    #F2F0EB;
  --on-ink-2:  #9A9AA2;

  /* ---- Signal ---- */
  --signal:    #FF3D2E;
  --signal-d:  #E22B1C;
  --signal-t:  #FFE7E3;

  /* ---- Lines ---- */
  --line:      rgba(13, 13, 15, 0.13);
  --line-2:    rgba(13, 13, 15, 0.24);
  --line-ink:  rgba(242, 240, 235, 0.16);

  /* ---- Shadow ---- */
  --sh-sm:     0 2px 10px rgba(13, 13, 15, 0.05);
  --sh:        0 14px 44px rgba(13, 13, 15, 0.10);
  --sh-lg:     0 40px 100px rgba(13, 13, 15, 0.16);

  /* ---- Type ---- */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-mega:   clamp(3rem, 13vw, 13.5rem);
  --fs-xl:     clamp(2.4rem, 8vw, 8rem);
  --fs-lg:     clamp(1.9rem, 5vw, 4.5rem);
  --fs-md:     clamp(1.4rem, 2.8vw, 2.4rem);
  --fs-sm:     clamp(1.1rem, 1.7vw, 1.45rem);
  --fs-lead:   clamp(1.05rem, 1.35vw, 1.35rem);
  --fs-body:   1rem;
  --fs-s:      0.9375rem;
  --fs-xs:     0.8125rem;
  --fs-label:  0.6875rem;

  /* ---- Space ---- */
  --maxw:      1680px;
  --gutter:    clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 11vw, 10rem);

  /* ---- Radius ---- */
  --r:         6px;
  --r-lg:      18px;
  --r-pill:    100px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);
  --t:         0.45s;
  --t-slow:    0.9s;

  /* ---- Layers ---- */
  --z-nav:     700;
  --z-menu:    800;
  --z-cursor:  9000;
  --z-load:    9500;
}