/* =========================================================
   Design tokens — change a value here, it changes everywhere
   ========================================================= */

:root {
  /* Surfaces */
  --paper:        #F1F2F6;  /* page background */
  --surface:      #FFFFFF;  /* cards, tiles */
  --surface-sunk: #FAFAFC;  /* metric cells, inset panels */
  --ink-panel:    #14151A;  /* dark cards (DevOps Drive, contact) */
  --ink-panel-2:  #1C1E25;  /* dark cells inside dark cards */

  /* Text */
  --ink:        #14151A;
  --ink-soft:   #3A3D48;
  --ink-muted:  #666B78;
  --on-dark:         #F1F2F6;
  --on-dark-muted:   #C9CCD6;
  --on-dark-faint:   #9AA0AE;

  /* Lines */
  --line:        #E1E3E9;
  --line-strong: #C9CCD6;
  --line-dark:   #2A2C34;

  /* Accents — indigo is structural/interactive, tangerine is for numbers */
  --accent:     #3B2DE8;
  --accent-2:   #FF5A1F;

  /* Type */
  --font-display: 'Bricolage Grotesque', Helvetica, sans-serif;
  --font-body:    'Instrument Sans', Helvetica, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* Spacing scale */
  --s-1:  5px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 26px;
  --s-7: 32px;
  --s-8: 44px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 104px;

  /* Layout */
  --page-max: 1240px;
  --page-pad: 40px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.75s;
}